天天看點

css3 下邊框緩緩劃過_CSS3 邊框

CSS3 邊框

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

在本章中,您将了解以下的邊框屬性:

border-radius

box-shadow

border-image

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 中使用圖檔建立邊框:

Border

執行個體

在 div 中使用圖檔建立邊框

div

{

border-image:url(border.png) 30 30 round;

-webkit-border-image:url(border.png) 30 30 round;

-o-border-image:url(border.png) 30 30 round;

}