CSS3新属性精简版

一、边框

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

二、 背景

• background-image（背景图片）
• background-size（背景图片大小）
• background-origin（背景图片的定位区域）
• background-clip（背景图片的绘制区域--截图）

三、 渐变

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

四、文本效果

• text-shadow（文本阴影）
• box-shadow（盒子阴影）
• text-overflow（如何显示溢出内容）
• word-wrap（换行）
• word-break（ 单词拆分换行）

五、字体 

• @font-face 

六、2D 转换 

• translate()（移动）
• rotate()（旋转）
• scale()（宽高放大或缩小多少倍）
• skew()（倾斜）
• matrix()（旋转，缩放，平移和倾斜）

七、 3D 转换

 

函数	描述
matrix3d(n,n, n,n,n,n , n,n,n ,n,n,n, n,n,n,n )	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

八、过渡 

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

九、 动画

• @keyframes 
• animation

十、多列 

• column-count（列数）
• column-gap（列之间差距）
• column-rule（所有列规则）
• column-rule-color（列之间颜色规则）
• column-rule-style（列之间的样式规则）
• column-rule-width（列之间的宽度规则）
• column-width（列的宽度）

十一、 用户界面

• resize（指定一个元素是否应该由用户去调整大小）
• outline-offset（对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓）

十二、框大小 

• box-sizing（border等是否占内容部分的宽高，重要）

十三、 弹性盒子(Flex Box)

• flex（很重要）

十四、多媒体查询

• @media