css3新特性总结

选择器　

:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd)  /* 按照奇数 */
:disabled /* 选择每个禁用的E元素 */
:checked /* 选择每个被选中的E元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */

伪类：用于向某些选择器添加特殊的效果（没有创建新元素）

:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

伪元素：创建了 html 中不存在的元素，用于将特殊的效果添加到某些选择器

::before {} /* 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
::after {} /* 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
:first-letter /* 选择该元素内容的首字母 */
:first-line /* 选择该元素内容的首行 */
::selection /* 选择被用户选取的元素部分 */

css3边框

　　border-radius（圆角）、 box-shadow（阴影）、 border-image（边框图片）

css3背景

　　background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
　　background-origin：规定背景图片的定位区域

文本效果

　　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 分别是上划线、中划线、下划线

字体

 　　您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

2D/3D

转换

过渡（transition）

　　使页面变化更平滑，以下参数可直接写在 transition 后面

1. transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。
2. transition-duration：过渡动画的一个持续时间。
3. transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
4. transition-delay：延迟多久后开始动画

动画（animation）
　　先定义 @keyframes 规则（0%，100% | from，to）然后定义 animation，以下参数可直接写在 animation 后面

1. animation-name: 定义动画名称
2. animation-duration: 指定元素播放动画所持续的时间长
3. animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )： 指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式
4. animation-delay: 指定元素动画开始时间
5. animation-iteration-count: infinite | number：指定元素播放动画的循环次数
6. animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放）
7. animation-play-state: running | paused ：控制元素动画的播放状态

多列布局

　　通过CSS3，能够创建多个列来对文本进行布局

1. column-count: 规定元素应该被分隔的列数
2. column-gap: 规定列之间的间隔
3. column-rule: 设置列之间的宽度、样式和颜色规则

用户界面

　　resize 属性规定是否可由用户调整元素尺寸。

　　box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

　　outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

CSS 兼容内核

　　-moz-：代表FireFox浏览器私有属性
　　-ms-：代表IE浏览器私有属性
　　-webkit-：代表safari、chrome浏览器私有属性
　　-o-：代表opera浏览器私有属性