css3新增特性

选择器：伪类和伪元素(根本区别在于它们是否创造了新的元素（抽象）)

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

• :last-child /* 选择元素最后一个孩子 */
• :first-child /* 选择元素第一个孩子 */
• :nth-child(1) /* 按照第几个孩子给它设置样式 */
• 伪类：用于向某些选择器添加特殊的效果（没有创建新元素）
• :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 /* 选择被用户选取的元素部分 */

背景和边框

• 背景：

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

• 边框：

• border-radius：圆角
• box-shadow / text-shadow：阴影
• border-image：边框图片

文本效果

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

2D/3D转换

动画、过渡

• CSS3的transition（过渡）功能就像是一种黄油，可以让CSS的一些变化变得平滑。因为原生的CSS过渡在客户端需要处理的资源要比用JavaScript和Flash少的多，所以才会更平滑。
• CSS3的animation（动画）属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成：
• 通过类似Flash动画中的帧来声明一个动画；
• 在animation属性中调用关键帧声明的动画。
  

多列布局

用户界面