css3新特性

css3中新增的一些特性大概可以分为：选择器，背景和边框属性，文本效果，2D/3D转换

1. 选择器

常规选择器

:last-child /* 选择元素最后一个孩子 */

:first-child /* 选择元素第一个孩子 */

:nth-child(1) /* 按照第几个孩子给它设置样式 */

:nth-child(even) /* 按照偶数 */

:nth-child(odd)  /* 按照奇数 */

:disabled /* 选择每个禁用的dom元素 */

:checked /* 选择每个被选中的dom元素 */

:not(selector) /* 选择非 selector 元素的每个元素 */

::selection /* 选择被用户选取的元素部分 */

2.背景和边框

背景:

规定背景图片的尺寸:background-size

规定背景图片的定位区域:background-origin（content-box、padding-box、margin-box）

边框:

border-radius: 圆角

border-shadow/text-shadow: 阴影

border-image: 边框图片

3.文本效果

text-shadow	向文本添加阴影
text-justify	规定当 text-align 设置为 “justify” 时所使用的对齐方法
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色
text-outline	规定文本的轮廓
text-overflow	规定当文本溢出包含元素时发生的事情
text-wrap	规定文本的换行规则
word-break	规定非中日韩文本的换行规则
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行
text-decoration	文本修饰符：overline、line-through、underline (上划线、中划线、下划线)

 

4.2D/3D转换

变形transform：

有rotate旋转、scale缩放、translate位移、skew倾斜

过渡transition：

transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值

动画animation

动画的使用，首先通过@（-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用

 

这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-）