注意： 以下主要列举出CSS3新增属性， CSS3被划分为多个模块，所以在学习时，可以分模块的学习。

主要涉及到的知识有：

• CSS3 边框
• CSS3背景
• CSS3文本
• CSS3 字体
• CSS3 2D转换
• CSS3 3D转换
• CSS3 过渡
• CSS3 动画（未完成）
• CSS3 多列（未完成）
• CSS3 用户界面（未完成）

CSS3 边框

• border-radius: 设置边框的半径，实例： 画圆角，画图形
• box-shadow: 设置边框的阴影
• border-image: 设置边框的背景图像
• 兼容性问题： IE9以上支持

CSS3背景

• background-size: 背景图片的尺寸
• background-clip: 规定背景的绘制区域，可选属性值： border-box | padding-box | content-box
• background-origin: 规定background-position相对于相对于什么来定位，可选属性值： border-box | padding-box | content-box

CSS3文本

• text-shadow: 向文本添加阴影
• word-wrap: 文本换行
• 兼容性：CSS3对于文本还添加了很多其他属性，只是因为兼容性问题，所以没有列举出来

CSS3 字体

• @font-face： 可以使用它来自定义字体，常见应用是：iconfont

CSS3 2D转换

通过转换，可以对元素实现移动、转动、缩放和拉伸

• transform: 向元素应用2D转换，也就是在x和y轴上，常用属性
  • translate(x, y)： 沿着X轴和Y轴移动，应用场景： 配合position: absolute; 实现垂直水平居中
  • rotate(angle): 元素旋转角度，如：transform: rotate(30deg);表示元素旋转30度
  • scale(x, y) ：改变元素的宽度和高度
  • skew(x-angle, y-angle)： 沿着想，x方向和y方向倾斜

CSS3 3D转换

相比于2D转换，3D转换在其基础上增加了对元素z轴方向的操作；

CSS3 过渡

表示将元素从一种样式转变到另一种样式，如何使用：

1. 首先需要定义使用过渡效果的CSS属性
2. 过渡的时长

属性

• transition
  • transition-property：应用转变的CSS属性
  • transition-duration：过渡花费的时间
  • transition-timing-function: 过渡的线性函数
  • transition-delay：规定过渡何时开始，可以实现延时