DIV CSS 佈局教程網

下面列出了常用的CSS3邊框屬性：

CSS3邊框屬性 屬性 說明 border-radius 圓角效果 border-colors 多色邊框 border-image 邊框背景 box-shadow 邊框陰影

一、border-radius屬性

在CSS3中，我們可以使用border-radius屬性為元素添加圓角效果。

語法：

border-radius:長度值;

說明：

長度值可以是px、百分比、em等。

二、border-colors屬性

在CSS2中，我們可以用border-colors屬性設置邊框的顏色。記住，是border-colors，不是border-color。

圖1 多色邊框

圖2 漸變邊框

語法：

 
-moz-border-top-colors:顏色值;
-moz-border-right-colors:顏色值;
-moz-border-bottom-colors:顏色值;
-moz-border-left-colors:顏色值;

說明：

對於CSSS3中的border-colors屬性，我們需要注意3點：

（1）border-colors屬性並沒有得到各大主流浏覽器支持，目前僅有目前僅有Mozilla Gecko引擎（火狐浏覽器）支持；

（2）不能使用-moz-border-bolors屬性為4條邊同時設定顏色，必須像上面語法那樣分別為4條邊設定顏色；

（3）如果邊框寬度（border-width）為n像素，則該邊框可以使用n種顏色，每種顏色顯示1像素的寬度。

三、border-image屬性簡介

在CSS3中，我們可以使用border-image屬性為邊框添加背景圖片。

語法：

說明：

從上面語法分析圖，我們可以看出，使用border-image設置邊框背景圖片需要設置3種參數：

• （1）圖片路徑；
• （2）切割圖片的寬度（4條邊的寬度，依次為上邊、右邊、下邊、左邊，按照順時針方向，類似於border屬性的4條邊順序）；
• （3）圖片平鋪方式；

四、box-shadow屬性簡介

在CSS3中，我們可以使用box-shadow屬性輕松地為元素添加陰影效果。

語法：

box-shadow:x-shadow y-shadow blur spread color inset;

說明：

（1）x-shadow：設置水平陰影的位置（X軸），可以使用負值；

（2）y-shadow：設置垂直陰影的位置（y軸），可以使用負值；

（3）blur：設置陰影模糊半徑；

（4）spread：擴展半徑，設置陰影的尺寸；

（5）color：設置陰影的顏色；

（6）inset：這個參數默認不設置。默認情況下為外陰影，inset表示內陰影。