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 屬性
<style>
div{
    border:20px solid transparent;
    width:330px;
    padding:20px;
}
#NewImgBorder{
    -moz-border-image:url(圖片網址) 30 30 round;    /* 給 Firefox 看*/
    -webkit-border-image:url(圖片網址) 30 30 round;    /* 給 Safari 與 Chrome 看*/
    -o-border-image:url(圖片網址) 30 30 round;        /* 給 Opera 看*/
    border-image:url(圖片網址) 30 30 round;
}
</style>
<div id="NewImgBorder">CSS image-border 屬性範例</div>
範例的實際效果
CSS image-border 屬性範例
範例三是一個很特殊的功能,各位可以從範例的實際效果看到這個 DIV 區塊有很美麗的圖片邊框,那邊框效果真的是一張圖片所展現出來的效果,不過特別的地方在於原始圖片其實只是一張小圖,大小尺寸與 DIV 區塊完全不同,我們是透過 CSS3 的 border-image 屬性來設定,讓小圖與大的 DIV 區塊尺寸吻合,成為相當具有美感的 DIV 區塊,這種效果在傳統網頁設計技術下,也必須採用繪圖軟體製作。

詳細介紹:CSS3 border-image 屬性

❉ 後記

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

更多 CSS3 的功能
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C