css3
目录：边框、背景、渐变、文本阴影、字体
1、边框
1）圆角：
div
{
border:2px solid;
border-radius:25px;
}
2）阴影
div
{
box-shadow: 10px 10px 5px #888888;
}
3）边界图片
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
2、背景
默认border-box
3、渐变gradient
1）线性渐变linear-gradient （默认从上到下）
background: linear-gradient(direction, color-stop1, color-stop2, ...);
从左到右：
对角：
角度：
background: linear-gradient(angle, color-stop1, color-stop2);
使用多个颜色：
#grad3 {
height: 200px;
background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */
background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */
}
透明度：
重复：
2）径向渐变 radial-gradient
background: radial-gradient(center, shape size, start-color, ..., last-color);
center 从中心点出发，也可以设置具体位置
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
size 参数定义了渐变的大小。它可以是以下四个值：
- closest-side
- farthest-side
- closest-corner
- farthest-corner
重复 repeating-radial-gradient()
4、文本阴影
text-shadow: 5px 5px 5px #FF0000;
（和box-shadow是一样的）
text-overflow：CSS3文本溢出属性指定应向用户如何显示溢出内容
换行：
word-break:keep-all; 不拆单词
word-break:break-all; 拆单词
5、字体
@font-face引入新的字体
font-family：新的字体的名字
6、2D转换transform
1）translate() 移动
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
2）rotate() 旋转
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
3）scale() 缩放
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
宽变成2倍，高变成3倍 transform: scale(1.1); 整体变成1.1倍
4）skew() 倾斜
transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
- skewX(<angle>);表示只在X轴(水平方向)倾斜。
- skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
5）matrix() 把上面的方法混合
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能