HTML是骨架，CSS是装饰，CSS使得网页丰富多彩，它也是Web开发不可或缺的一部分。
同HTML5一样，CSS3也存在兼容性问题，不同浏览器支持情况不同，甚至，特定的浏览器指定了特定CSS属性。
下表是针对不同浏览器需要的特殊前缀：
| 前缀 | 浏览器 |
|---|---|
| -moz- | Firefox |
| -webkit- | Chrome, Safari |
| -ms- | Internet Explorer |
| -o- | Opera |
CSS3新特性分为两大类，一是支持了新的选择器，比如伪类:last-child，:first-child等等；二是页面渲染方面的新功能。
本文只介绍第二类中比较重要的新特性。
1. Web字体@font-face
CSS3支持自定义字体，只需要在项目中导入字体文件或者文件链接url（常用的有.woff，.svg，eot等格式），样式文件中用@font-face定义字体名，字体文件路径等等。之后，可以在font-familiy属性中使用自定义字体名。
例如，我们在项目中使用google font：
// 定义字体
@font-face {
font-family: 'BadScript';
font-style: normal;
font-weight: 400;
src: local('Bad Script Regular'), local('BadScript-Regular'),
url(../font/googlefonts/rL_b2ND61EQmMOJ8CRr1fhsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
// 使用字体
.BadScript {
font-family: 'BadScript', Georgia, "Times New Roman", Times, serif;
}
2. 多栏文本
支持多栏文本有的CSS3属性有：
-
column-count设置栏数 -
column-width设置每栏的宽度
3. 媒体查询media
媒体查询media可以取得设备关键信息，如大小，分辨率等等，根据这些信息应用不同样式。
(1)定义样式表外部链接时使用
(2) CSS样式表中使用
/*窗口宽度介于600像素到700像素直接，使用该样式*/
@media (min-width: 600px) and (max-width: 700px) { ... }
/*窗口宽度小于400像素使用该样式*/
@media (min-width: 400px) { ... }
4.透明度 opacity
注意，opacity值是小数。
使用opacity给元素设置透明度，会将背景颜色，文本颜色和边框颜色都变透明。如果只想设置其中一种类型的透明度，可以使用函数ragb(val1, val2, val3, opacity)。
5. 圆角 border-radius
支持矩形圆角，可以给一个盒子设置四个弧度不同的圆角。
roundBox {
border-top-left-radius: 150px 30px; /* 圆弧 */
border-top-right-radius: 150px 60px;
border-bottom-left-radius: 150px; /* 半圆弧 */
border-bottom-right-radius: 150px;
}
5. 背景盒子
利用background-xxx几个属性，可以给盒子设置背景图片（应用多个图片，指定图片是否重复，图片位置等信息）。
.bgBox {
/*设置多张背景图片*/
background-image: url("top-left.png"), url("bottom-right.png");
/*背景图片不重复*/
background-repeat: no-repeat, no-repeat;
/*定义背景图片位置*/
background-position: left top, right bottom;
}
6. 阴影盒子
CSS3定义了两种阴影：文字阴影和盒子阴影，分别为text-shadow和box-shadow，阴影默认被设置在盒子外部。
该属性值格式为（[]内的是可选项）：水平偏移量+垂直偏移量+阴影模糊程度[+阴影延伸范围]+阴影颜色[+inset(在元素内部创建阴影)]。
.box {
box-shadow: 1px 5px 10px 20px blue inset;
}
.text {
text-shadow: 1px 3px 5px green;
}
7. 渐变盒子
渐变是多种颜色混合的效果，有三种渐变：
- 线性渐变：linear-gradient函数
- 径向渐变：radial-gradient函数
目前，需要加浏览器前缀来支持渐变效果，而且，不同浏览器支持函数参数不同：
/*一个从左到右的渐变效果*/
background-image: -moz-linear-gradient(left, $leftColor, $rightColor);
background-image: -ms-linear-gradient(left, $leftColor, $rightColor);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, $leftColor), color-stop(1, $rightColor));
8. 过渡效果 transition
过渡效果有：颜色变换，移动。利用transition可以让过渡效果更佳平滑。
transition属性值格式为：过渡样式+过渡时间
/*在盒子上应用两个过渡效果，分为针对背景色和文本颜色*/
.box {
transition: background 0.5s, color 0.5s;
}
9. 变换 transform
变换包括移动，缩放，旋转等等，比如45度旋转一个盒子transform: rotate(45deg)。下面是常用值：
- 旋转
- 2D旋转：rotate(angle)
- 3D旋转：rotate3d(x,y,z,angle)
- 沿着X轴3D旋转：rotateX(angle)
- 沿着Y轴3D旋转：rotateY(angle)
- 沿着Z轴3D旋转：rotateZ(angle)
- 缩放
- 2D缩放：scale(x, y)
- 3D缩放：scale3d(x,y,z)
- 位移
- 2D位移：translate(x,y)
- 3D位移：translate3d(x,y,z)
- 沿着X轴位移：translateX(x)
- 沿着Y轴位移：translateY(x)
- 沿着Z轴位移：translateZ(x)
- 倾斜旋转
- 倾斜旋转：skew(x-angle,y-angle)
- 沿X 轴倾斜旋转：skewX(angle)
- 沿Y 轴倾斜旋转：skewY(angle)
10. 动画 animation
动画设置分为两部分，一是定义动画帧变化；二是应用动画。
定义动画帧变化，一般用百分数把动画分割为若干关键点，声明在keyframes关键字下，分别定义每个节点的表现形式。
下面是一个W3C官网的例子，该动画有4个节点会发生左偏移和背景色变化（建议加上浏览器前缀）。
@-webkit-keyframes 'wobble' {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
然后用animation属性应用动画：
.box {
/*动画属性名，也就是前面keyframes定义的动画名*/
animation-name:'wobble';
/*动画持续时间，以s或者ms计算*/
animation-duration: 10s;
/*动画速度曲线*/
animation-timing-function: ease-in-out;
/*动画延迟时间*/
animation-delay: 2s;
/*循环次数，infinite为无限次*/
animation-iteration-count: 10;
/*是否反向播放动画，normal：默认值，正常播放；alternate：反向播放*/
animation-direction: alternate;
}
小结
CSS3新属性非常多，上面10个只是比较常用的和渲染相关的功能，如果需要进一步学习，可以参考W3C或者developer.mozilla。
下一节：HTML5简明教程（四）Web存储
更多高阶内容，可移步《小专栏-娜姐聊前端》。