CSS3 text-shadow 屬性範例、創造陰影效果

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 文字陰影效果》篇。