CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增加了很多強大的新功能。 目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支援了CSS3大部分功能了，IE10以後也開始全面支援CSS3了。

在編寫CSS3樣式時，不同的瀏覽器可能需要不同的字首。它表示該CSS屬性或規則尚未成為W3C標準的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不需要字首的，但為了更好的向前相容字首還是少不了的。

div
{
transform:rotate(30deg);
}

text-shadow: h-shadow v-shadow blur color;

註釋：text-shadow 屬性向文字新增一個或多個陰影。該屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和一個可選的顏色值進行規定。省略的長度是 0。

p {word-wrap:break-word;}

CSS3邊框屬性：

• border-radius
• box-shadow
• border-image

Firefox、Chrome 以及 Safari 支援所有新的邊框屬性。Internet Explorer 9+ 支援 border-radius 和 box-shadow 屬性。

註釋：對於 border-image，Safari 5 以及更老的版本需要字首 -webkit-。

Opera 支援 border-radius 和 box-shadow 屬性，但是對於 border-image 需要字首 -o-。

向 div 元素新增圓角

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

向 div 元素新增方框陰影

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

使用圖片建立圍繞 div 元素的邊框
 

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

通過 CSS3 的 border-image 屬性，您可以使用圖片來建立邊框：

用於建立上面的邊框的原始圖片：

div
{
border-image:url(border.png) 30 30 stretch;
-moz-border-image:url(border.png) 30 30 stretch; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
}

CSS3 背景屬性：

• background-size
• background-origin

使用多重背景圖片。

CSS3 background-origin 屬性

background-origin 屬性規定背景圖片的定位區域。

背景圖片可以放置於 content-box、padding-box 或 border-box 區域。

在 content-box 中定位背景圖片：

div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

規定背景的繪製區域：

div
{
background-color:yellow;
background-clip:content-box;
}

為 body 元素設定兩幅背景圖片

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

CSS3 @font-face 規則

在 CSS3 之前，web 設計師必須使用已在使用者計算機上安裝好的字型。

通過 CSS3，web 設計師可以使用他們喜歡的任意字型。

當您您找到或購買到希望使用的字型時，可將該字型檔案存放到 web 伺服器上，它會在需要時被自動下載到使用者的計算機上。

您“自己的”的字型是在 CSS3 @font-face 規則中定義的。

使用您需要的字型

如需為 HTML 元素使用字型，請通過 font-family 屬性來引用字型的名稱 (myFirstFont)：

例項

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

div
{
font-family:myFirstFont;
}
</style>

CSS3 多列

通過 CSS3，您能夠建立多個列來對文字進行佈局 - 就像報紙那樣！

在本章中，您將學習如下多列屬性：

• column-count
• column-gap
• column-rule

把 div 元素中的文字分隔為三列：

div
{
-moz-column-count:3; 	/* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

規定列之間 40 畫素的間隔：

div
{
-moz-column-gap:40px;		/* Firefox */
-webkit-column-gap:40px;	/* Safari 和 Chrome */
column-gap:40px;
}

規定列之間的寬度、樣式和顏色規則：

div
{
-moz-column-rule:3px outset #ff0000;	/* Firefox */
-webkit-column-rule:3px outset #ff0000;	/* Safari and Chrome */
column-rule:3px outset #ff0000;
}