CSS3 邊框設計

CSS3 具有比 CSS2 更強大的邊框設計功能，包含了三項新屬性，分別是設計圓角矩形的 border-radius、設計陰影效果的 box-shadow 以及設計圖片邊框效果的 border-image 這三個屬性，利用這三個全新的 CSS3 邊框屬性，可以讓網頁設計師迅速的做出美觀的元素邊框，而且不需要用傳統的 Photoshop 或 GIMP 等繪圖軟體來設計這些效果，除了 border-image 需要先準備好圖片之外，幾乎用不到繪圖軟體，也因為這三個邊框設計效果實在很好用，所以獲得了絕大多數主流瀏覽器的支援，例如最新版的 IE, FireFox, Chrome, Opera, Safari ... 等，本篇將替這三項 CSS3 邊框屬性做基本的範例介紹，您可以由每個範例分別進入各個屬性的詳細介紹頁面閱讀。

CSS3 邊框設計範例一、設計圓角矩形的 border-radius 屬性

<div style="border:2px green solid;border-radius:5px;width:460px;height:50px;background-color:#eee;">
CSS3 border-radius 圓角特效
</div>

範例的實際效果

CSS3 border-radius 圓角特效

範例一是將 CSS3 的 border-radius 屬性套用到 DIV 區塊內，修飾 DIV 區塊預設的四個垂直轉角成為圓角的視覺效果，傳統的圓角邊框通常會採用繪圖軟體來製作，不過 CSS3 的 border-radius 很顯然的提供了更有效率的設計方案。

詳細介紹：CSS3 圓角 border-radius。

CSS3 邊框設計範例二、設計陰影效果的 box-shadow 屬性

<div style="box-shadow:3px 3px 12px pink;width:460px;line-height:100px;text-align:center;">
CSS3 box-shadow 陰影效果
</div>

範例的實際效果

CSS3 box-shadow 陰影效果

範例二將 CSS3 的 box-shadow 屬性套用到 DIV 區塊，替這個區塊增加了粉紅色的陰影效果，是不是挺漂亮的呢？嚴格來說 box-shadow 並不屬於 CSS3 邊框設計的一環，只能算是一個新功能，不過 box-shadow 用起來通常視覺效果都在邊框的部份，所以就一併介紹。

詳細介紹：CSS3 box-shadow

CSS3 邊框設計範例三、設計圖片邊框效果的 border-image 屬性

範例的實際效果

CSS image-border 屬性範例

範例三是一個很特殊的功能，各位可以從範例的實際效果看到這個 DIV 區塊有很美麗的圖片邊框，那邊框效果真的是一張圖片所展現出來的效果，不過特別的地方在於原始圖片其實只是一張小圖，大小尺寸與 DIV 區塊完全不同，我們是透過 CSS3 的 border-image 屬性來設定，讓小圖與大的 DIV 區塊尺寸吻合，成為相當具有美感的 DIV 區塊，這種效果在傳統網頁設計技術下，也必須採用繪圖軟體製作。

詳細介紹：CSS3 border-image 屬性

❉ 後記

以上三種 CSS3 邊框設計新功能的優點想必各位讀者朋友已經了解，要如何應用到網頁設計上，就看各位設計師的巧思囉！最後，如果您想獲得更多網頁設計的技術分享資訊，歡迎加入我們的粉絲團。

更多 CSS3 的功能