CSS3邊框執行個體教程

CSS3 邊框

用CSS3，你可以建立圓角邊框，添加陰影框，並作為邊界的形象而不使用設計程式，如Photoshop。

在本章中，您將瞭解以下的邊框屬性：

border-radius

box-shadow

border-image

瀏覽器支援

屬性

瀏覽器支援

Internet Explorer 9+ 支援 border-radius 和 box-shadow.

Firefox, Chrome, 和 Safari 支援所有最新的 border 屬性.

注意： 首碼是-webkit-的Safari支援陰影邊框。

首碼是-o-的Opera支援邊框映像。

CSS3 圓角

在CSS2中添加圓角棘手。我們不得不在每個角落使用不同的映像。

在CSS3中，很容易建立圓角。

在CSS3中border-radius屬性被用於建立圓角：

這是圓角邊框！

執行個體

在div中添加圓角元素：

div{border:2px solid;border-radius:25px;}

CSS3盒陰影

CSS3中的box-shadow屬性被用來添加陰影:

執行個體

在div中添加box-shadow屬性

div{box-shadow: 10px 10px 5px #888888;}

CSS3邊界圖片

有了CSS3的border-image屬性，你可以使用映像建立一個邊框：

border-image屬性允許你指定一個圖片作為邊框！ 用於建立上文邊框的原始映像：

在div中使用圖片建立邊框:

執行個體

在div中使用圖片建立邊框

div{border-image:url(border.png) 30 30 round;-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */-o-border-image:url(border.png) 30 30 round; /* Opera */}

【相關推薦】

1. 精選：“php程式員工具箱”V0.1版本下載

2. 免費css線上視頻教程

3. php.cn獨孤九賤（2）－css視頻教程