CSS3提供了強大的邊框樣式設(shè)置方法,可以通過使用border屬性為元素的邊框設(shè)置顏色、半徑、寬度、樣式等多種不同的屬性。
div{ border: 1px solid black; //設(shè)置元素邊框為1px寬度,樣式為實線,顏色為黑色 }
在CSS3中,我們可以利用border-radius屬性來設(shè)計元素的圓角。
div{ border: 1px solid black; border-radius: 10px; //設(shè)置元素邊框為圓角,半徑為10px }
同時,CSS3還允許我們?yōu)槊總€角設(shè)置不同的圓角屬性。
div{ border: 1px solid black; border-radius: 10px 20px 15px 5px; //設(shè)置左上角,右上角,右下角,左下角的圓角半徑分別為10px,20px,15px和5px }
如果需要在元素邊框設(shè)置圖片樣式,我們可以通過border-image屬性來完成。
div{ border-image: url('border.png') 30 30 repeat; //設(shè)置元素邊框的樣式為border.png圖片,圖片邊框?qū)挾葹?0px,重復(fù)方式為平鋪 }
CSS3還支持多重邊框樣式,我們可以通過box-shadow屬性實現(xiàn)這一功能。
div{ box-shadow: 0 0 10px 5px red, //設(shè)置元素最里層緊貼元素的陰影樣式為紅色 0 0 15px 10px blue, //設(shè)置元素第二層的陰影樣式為藍色 0 0 20px 15px gray; //設(shè)置元素最外層的陰影樣式為灰色 }
總的來說,CSS3提供了許多邊框樣式屬性的設(shè)置方法,讓我們可以更好的為網(wǎng)頁元素進行美化。