CSS3 是最新的 CSS 標準，CSS3是CSS（層疊樣式表）技術(shù)的升級版本，對CSS3已完全向后兼容，所以你就不必改變現(xiàn)有的設(shè)計。主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。

一、圓角邊框

在 CSS2 中添加圓角棘手。我們不得不在每個角落使用不同的圖像。在 CSS3 中，很容易創(chuàng)建圓角。使用border-radius屬性就可以創(chuàng)建圓角，根據(jù)數(shù)值大小，調(diào)整圓角幅度，非常方便。

如果你在 border-radius 屬性中只指定一個值，那么將生成 4 個 圓角。但是，如果你要在四個角上一一指定，可以使用以下規(guī)則：

（1）、四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。

（2）、三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角

（3）、兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角

（4）、一個值： 四個圓角值相同

Example：在div中加圓角元素

效果圖如下：

二、多背景圖和邊界圖片

CSS3中可以通過background-image屬性添加背景圖片。不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的為第一張。有了 CSS3 border-image 屬性，你可以使用圖像創(chuàng)建一個邊框。border-image 屬性允許你指定一個圖片作為邊框！ 用于創(chuàng)建上文邊框的原始圖像。注：Internet Explorer 不支持 border-image 屬性。

Example：在 div 中使用圖片創(chuàng)建邊框，并使用多背景圖片。

效果圖如下：

三、漸變

CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。通過使用 CSS3 漸變（gradients），你可以減少下載的時間和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。注：Internet Explorer 9 及之前的版本不支持漸變。語法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

漸變類型有兩種：

（1）、線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向

（2）、徑向漸變（Radial Gradients）- 由它們的中心定義

Example：

線性漸變 - 從上到下（默認情況下），下面的實例演示了從頂部開始的線性漸變。起點是綠色，慢慢過渡到黃色：

效果圖如下：

線性漸變 - 對角

你可以通過指定水平和垂直的起始位置來制作一個對角漸變。下面的實例演示了從左上角開始（到右下角）的線性漸變。起點是紅色，慢慢過渡到藍色：

效果圖如下：

四、文本陰影和盒子陰影

文本陰影是個文字添加陰影效果，使用屬性text-shadow即可達成效果，盒子陰影是給類似DIV的標簽是個BOX的添加陰影，box-shadow 屬性適用于盒子陰影。注：Internet Explorer 9 以及更早版本的瀏覽器不支持 text-shadow屬性。

Example：給標題添加陰影，指定了水平陰影，垂直陰影，模糊的距離，以及陰影的顏色，以及盒子陰影：

效果圖如下：

大概介紹這么幾個，希望對大家有所幫助，css3減少開發(fā)成本，提高頁面性能，好好掌握會有大用處。