css3 新特性

1.Css text-intent属性：段落首行缩进
将段落的第一行缩进 50 像素：

p
  {
  text-indent:50px;
  }

2.box-shadow 属性：添加一个或多个阴影

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:水平阴影，越大越右移，负值在左边
v-shadow:垂直阴影，越大越下移，负值在上边
blur:模糊的程度,值越大阴影边缘越模糊
spread:阴影的周长向四周扩展的尺寸
color:阴影的颜色
inset:将外部阴影 (outset) 改为内部阴影

div
{
box-shadow: 10px 10px 5px #888888;
}

效果：

.div{
            box-shadow: 0 0 20px 5px ;
            /* box-shadow: 0 0 20px 5px green;*/ /*也可以自定义颜色*/
    }

3.CSS3 text-shadow 属性: 基础的文本阴影效果

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

4.gradient 渐变

线形渐变
颜色值沿着一条隐式的直线逐渐过渡。由linear-gradient()产生。

.linear-gradient {
  background: linear-gradient(to right,
      red, orange, yellow, green, blue, indigo, violet);
}

径向渐变
颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。由radial-gradient()函数产生。

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

重复渐变
重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient()和repeating-radial-gradient()函数产生。

.linear-repeat {
  background: repeating-linear-gradient(to top left,
      lightpink, lightpink 5px, white 5px, white 10px);
}

.radial-repeat {
  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}

5.transform 允许我们对元素进行旋转、缩放、移动或倾斜
（1）rotate() 方法
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
值 rotate(30deg) 把元素顺时针旋转 30 度
（2）translate() 方法
元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
transform:translate(50px,100px);
（3）scale() 方法
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
transform:scale(2,4); 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍

（4）skew() 方法
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度

（5）matrix() 方法
matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);

6.CSS3 过渡 transition

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

7.css3 圆角属性
规则：
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度

8.CSS3 Text Overflow属性
text-overflow: clip;
例：文字太长用三个点显示

p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

text-overflow:ellipsis

9.CSS3的换行
（1）英文字母换行

p {word-wrap:break-word;}

（2）
p.test1 {
word-break: keep-all; //完整英文单词换行
}

p.test2 {
word-break: break-all;
}

10. CSS3 动画 animation

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}