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影片教學

以上是CSS3邊框實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！