1. css3簡介

CSS 用于控制網頁的樣式和布局,CSS3 是最新的CSS標準,CSS3 完全向后兼容，因此您不必改變現有的設計。瀏覽器通常支持 CSS2,但是現在大部分瀏覽器也實現了css3的很多特性。

CSS3 被劃分為模塊。其中最重要的 CSS3 模塊包括：

• 選擇器
• 框模型
• 背景和邊框
• 文本效果
• 2D/3D 轉換
• 動畫
• 多列布局
• 用戶界面

2. css3邊框

2.1 邊框圓角

Internet Explorer 9+ 支持 border-radius 和 box-shadow 屬性。

Firefox、Chrome 以及 Safari 支持所有新的邊框屬性。

border-radius(邊框圓角)語法如下：

border-radius:10px;代表四個方向都有一個微微的圓角

border-radius:50%;代表是正圓

2.2 邊框陰影

box-shadow（邊框陰影）語法如下：

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

第一個值代表陰影的水平偏移量，第二個值代表陰影的垂直偏移量，第三個值代表陰影的模糊度，第四個值代表陰影的顏色

3. css3背景

3.1背景圖大小

background-size（背景圖大小）

background-size:100px 100px; 可以給具體的數值

background-size:50% 50%; 可以給百分百 相對于父元素來說

background-size:cover; 會拉伸圖片，填滿div

background-size:contain; 拉伸圖片的時候一個方向填滿了，另一個方向停止了

3.2背景圖起始點

background-origin這個屬性可以設置背景圖到底是以content、padding還是border為起點來放置背景圖

而且css3還允許一個div放置多張背景圖

4. css3文本效果

4.1 文本陰影

text-shadow是規定文本陰影的，第一個值是陰影的水平偏移量，第二個值是陰影的垂直偏移量，第三個值是模糊度，第四個值是陰影的顏色。

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

4.2 文本換行

CSS3 自動換行

允許對長單詞進行拆分，并換行到下一行：

p {word-wrap:break-word;}

5. css3字體圖標

在 CSS3 之前，web 設計師必須使用已在用戶計算機上安裝好的字體。通過 CSS3，web 設計師可以使用他們喜歡的任意字體。

當您您找到或購買到希望使用的字體時，可將該字體文件存放到 web 服務器上，它會在需要時被自動下載到用戶的計算機上。

先定義自己的字體名稱然后使用自己定義的字體

<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}</style>

當然我們一般使用阿里巴巴矢量圖標庫引用字體文件比較多，前面已經講過，這里不贅述。

6. css32D轉換

通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。

語法如下：

translate()

div{transform: translate(50px,100px);-ms-transform: translate(50px,100px);		/* IE 9 */-webkit-transform: translate(50px,100px);	/* Safari and Chrome */-o-transform: translate(50px,100px);		/* Opera */-moz-transform: translate(50px,100px);		/* Firefox */}

rotate()

div{transform: rotate(30deg);-ms-transform: rotate(30deg);		/* IE 9 */-webkit-transform: rotate(30deg);	/* Safari and Chrome */-o-transform: rotate(30deg);		/* Opera */-moz-transform: rotate(30deg);		/* Firefox */}

scale()

div{transform: scale(2,4);-ms-transform: scale(2,4);	/* IE 9 */-webkit-transform: scale(2,4);	/* Safari 和 Chrome */-o-transform: scale(2,4);	/* Opera */-moz-transform: scale(2,4);	/* Firefox */}

skew()

div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg);	/* IE 9 */-webkit-transform: skew(30deg,20deg);	/* Safari and Chrome */-o-transform: skew(30deg,20deg);	/* Opera */-moz-transform: skew(30deg,20deg);	/* Firefox */}

7. css3 3D轉換

8. css3 transition

8.1 單項改變

div{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}

8.2 單項改多項改變

div{transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;}

9. css3 動畫

語法如下：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}