本文已参与「新人创作礼」活动，一起开启掘金创作之路。

css3增加了许多非常有效的新特性，如css3选择器、阴影（Shadow）、transform等，了解它们对书写css代码非常有帮助，今天一起来了解一下几个比较重要的吧！

css3选择器

伪类选择器

:first-child：选取父元素中的第一个子元素的指定选择器
:last-child：选取父元素中的最后一个子元素的指定选择器
:nth-child(n)：选取父元素中的第n个子元素的指定选择器
这里n还以选择取2n+1，或者2n来选择奇数元素或者偶数元素
:disabled 选择每一个禁用的输入元素
:checked 选择每个选中的输入元素

@Font-face 特性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face {                                                                        
     font-family: xxx;                                                
     src: url('https://..../xxx.ttf');
     font-weight: normal;                                                  
     font-style: normal;                                                   
}

圆角 border-radius

一个div有四个角，有时候不需要四个角都设置radius，css提供了选择单个角设置radius的方法

border-bottom-right-radius：   //取消右下角radius
border-top-right-radius：      //取消右上角radius
border-bottom-left-radius：    //取消左下角radius
border-top-left-radius：       //取消左上角radius
border-radius:0px              //取消radius

阴影（Shadow）

1、text-shadow属性，可实现文字阴影效果；
2、box-shadow属性，可实现边框阴影效果；

Transition 过渡效果

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property:规定设置过渡效果的 CSS 属性的名称。
transition-duration:规定完成过渡效果需要多少秒或毫秒。
transition-timing-function:规定速度效果的速度曲线。
transition-delay:规定速度效果的速度曲线。

transform：2D转换效果，旋转、缩放、移动或者倾斜

transform：rotate（45deg）；//旋转方向为顺时针方向。
transform：scale（0.5）；//缩小一半
transform：scale（0.5，2）；//水平方向缩小一半，垂直方向放大一倍。
transform：skew（30deg，30deg）；//水平方向上倾斜``30``度，垂直方向上倾斜``30``度。
transform：skew（30deg）；//只在水平方向上进行倾斜，垂直方向上不倾斜。
transform：translate（50px，50px）；// 水平方向上移动``50px``，垂直方向上移动``50px``
transform：translate（50px）；//只在水平方向上进行倾斜，垂直方向上不倾斜。
transform：translate（150px，200px） rotate（45deg） scale（1.5）；//对一个元素使用多种变形的方法
//使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转，在参数中加入角度值，
//角度值后面跟表示角度单位的deg文字即可，旋转方向为顺时针旋转。
transform：rotateX（45deg）；
transform：rotateY（45deg）；
transform：rotateZ（45deg）；
transform：rotateX（45deg） rotateY（45deg） rotateZ（45deg）；
transform：scale（0.5） rotateY（45deg） rotateZ（45deg）；

Animation动画特效

CSS 中的动画类似于 flash 中的逐帧动画，表现细腻并且非常灵活，使用 CSS 中的动画可以取代许多网页中的动态图像、Flash 动画或者 JavaScript 实现的特殊效果。

先了解下@keyframes 规则，@keyframes 规则用来定义动画各个阶段的属性值，类似于 flash 动画中的关键帧。 CSS 中提供了如下所示的动画属性：

animation-name：设置需要绑定到元素的动画名称；
animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
animation-timing-function：设置动画的速度曲线，默认为 ease；
animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
animation-delay：设置动画开始之前的延迟时间，默认为 0；
animation-iteration-count：设置动画被播放的次数，默认为 1；
animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
animation-play-state：设置动画是正在运行还是暂停，默认是 running；
animation：所有动画属性的简写属性。

总结

css3还添加了一些其它的比较好用的新特性，如：

弹性盒模型 display: flex;
多列布局 column-count: 2;
颜色透明度 color: rgba（0, 0, 0, 0.75）；
文字溢出 text-overflow:ellipsis;

还有很多，以后如果遇到重要的我会再加到上面。

了解几个CSS3新特性