CSS3 border-radius 屬性範例、創造圓角效果
<div style="border:1px #ccc solid;border-radius:8px;width:460px;height:50px;background-color:#eee;">CSS3 border-radius 圓角特效</div>
範例輸出結果CSS3 border-radius 圓角特效
傳統在設計一個區塊的圓角效果通常必須採用圖片的方式來設計，預設的 DIV 區塊四個角都是直角，CSS3 新增了 border-radius 屬性，可以快速的設計出圓角效果，大幅度節省設計時間，圓角效果還有多種變化，請參閱《CSS3 圓角 border-radius》篇詳細介紹。CSS3 text-shadow 屬性範例、創造陰影效果
<font style="text-shadow:0px 0px 13px #82FF82;">CSS3 text-shadow 陰影效果</font>
範例輸出結果CSS3 text-shadow 陰影效果
陰影效果也是 CSS3 的重要新增功能，所謂的陰影效果包含了文字與區塊的陰影效果，輕鬆增加網頁元素的立體視覺感受，取代以往傳統用繪圖軟體製作陰影文字的設計方式，CSS3 的兩種陰影效果請參閱《CSS3 box-shadow》與《CSS3 text-shadow 文字陰影效果》篇。CSS3 transition 屬性範例、創造動畫效果
<style type="text/css">
#Change{
width:60px;
height:60px;
background:red;
transition:width 1s;
-moz-transition:width 1s;
-webkit-transition:width 1s;
-o-transition:width 1s;
}
#Change:hover{
width:500px;
}
</style>
<div id="Change"></div>
範例輸出結果#Change{
width:60px;
height:60px;
background:red;
transition:width 1s;
-moz-transition:width 1s;
-webkit-transition:width 1s;
-o-transition:width 1s;
}
#Change:hover{
width:500px;
}
</style>
<div id="Change"></div>
動畫效果可說是 CSS3 最為迷人之處，因為網頁設計師可以利用 CSS3 的 transition 屬性，輕鬆寫出一個動畫效果，取代傳統用 Flash 設計的許多動畫，而且具有檔案精簡、傳輸效率高以及修改容易等優點，更不用擔心用戶端沒有安裝 Flash 閱讀軟體，常見 Google 首頁在特定節日或紀念日的 Doodle 動畫，就常採用 CSS3 與 HTML5 結合在一起的設計，關於 CSS3 動畫，請參閱以下篇幅的介紹。
看完以上簡單的 CSS 發展史以及 CSS3 新功能的範例，相信對於 CSS3 有了更進一步的認識，目前尚有許多 CSS3 好用的功能未受到所有瀏覽器支援，不過因為好的功能真的相當好用，相信未來 CSS3 的功能可以更全面也更普及，網頁設計的技術將大幅度提升。
更多 CSS3 設計