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;}
}