面试题 -- CSS3 的新特性?

CSS3 的新特性

选择器、背景和边框、文字特效、转换、动画、过度、文字特效以及颜色函数等。

新增边框属性

1. border-radius (opens new window) 圆角边框

/*四个值分别代表左上角，右上角，右下角，左下角，顺时针*/
border-radius：5px 4px 3px 2px;

2. box-shadow (opens new window) 边框阴影

/*四个值分别代表水平阴影的位置，垂直阴影的位置，模糊距离，阴影的颜色/
box-shadow: 10px 10px 5px #888888;

3. border-image (opens new window) 边框图片

/*三个值分别代表图片路径，图像边界的宽度，图像边界/
border-image: url(border.png) 30 round;

图像边界

• repeat: 重复
• stretch: 拉伸
• round: 铺满

新增文本效果

1. text-shadow (opens new window) 文字阴影

/* 四个值同 box-shadow */
text-shadow: 2px 2px 2px #ff0000;

2. text-overflow (opens new window) 文本溢出

/* clip:剪切超出部分; ellipsis: 超出部分显示省略符号 */
text-overflow:ellipsis;

text-overflow属性

• clip: 剪切超出部分
• ellipsis: 超出部分显示省略符号
• string: 超出部分指定字符串
• string: 超出部分指定字符串
• initial: 默认值
• inherit: 从父元素继承该属性值

3. word-wrap (opens new window) 文本换行

/* normal: 只在允许的断字点换行; break-word: 在长单词或 URL 地址内部进行换行 */
word-wrap: break-word

4. word-break (opens new window) 单词拆分换行

/* normal: 浏览器默认; break-all: 允许在单词内换行; keep-all:只能在半角空格或连字符处换行 */
word-break: break-all

新增字体属性

1. font-face (opens new window) 自定义字体

/* font-family: 定义字体的名称; src: 定义该字体下载的网址 */
@font-face
{
font-family: myFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

新增背景属性

1. background-image (opens new window) 背景图片

/* 参数为图片下载地址 */
background-image: url('paper.gif')

2. background-size (opens new window) 背景图片大小

/* 两个值分别代表高度和宽度 */
background-size: 80px 60px

3. background-origin (opens new window) 背景图片定位

/* padding-box: 背景图像填充框的相对位置; 
border-box: 背景图像边界框的相对位置; 
content-box: 背景图像的相对位置的内容框 */
background-origin: content-box

4. background-clip (opens new window) 背景图片裁剪

/* border-box: 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box: 背景绘制在衬距方框内（剪切成衬距方框）。
content-box:背景绘制在内容方框内（剪切成内容方框）。 */
background-clip: content-box

新增转换属性

1. transform (opens new window) 转换

/* 使元素偏移一定距离 */
transform: translate(50px,100px);

常用转换方法（旋转,缩放,定位,倾斜）

• translate(x,y): 沿着 X 和 Y 轴移动元素
• scale(x,y): 改变元素的宽度和高度
• rotate(angle): 旋转一定的角度 2D
• rotate3d(x,y,z,angle): 旋转一定的角度 3D
• skew(x-angle,y-angle): 沿着 X 和 Y 轴倾斜一定角度

新增过渡属性

1. transition (opens new window) 过渡

/* 两个值分别代表需要过渡的 CSS 属性的名称、过渡时间 */
transition: width 2s;

新增动画属性

1. @keyframes (opens new window) 动画规则

/* myfirst: 动画名称; from和to:	动画持续时间的百分比  */
@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

2. animation (opens new window) 动画属性

/* 两个值分别代表动画规则、动画时长 */
animation: myfirst 5s;

优化多媒体规则

1. @media (opens new window) 多媒体自适应规则

/* all: 所有多媒体类型设备; print: 打印机; screen: 电脑屏幕，平板，智能手机等; speech: 屏幕阅读器 */
@media all|screen|print|speech and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

新增函数

1. rgba() (opens new window) 颜色函数

/* 四个值分别代表红色成分R、绿色成分G、蓝色成分B、透明度A */
rgba(255,0,0,0.3)

新增更多的CSS选择器

相邻元素、父级元素、子元素等。
具体请参考完整CSS选择器参考手册 (opens new window)