CSS新特性:圓角邊框多欄Gird布局背景設(shè)置

2024-07-11 08:44:08

字體：大中小

供稿：網(wǎng)友

到現(xiàn)在為止,只有一些已經(jīng)工作的CSS3特性.
到現(xiàn)在為止，只有一些已經(jīng)工作的特性，他們中的一些如下:
圓角
從web2.0開(kāi)始，開(kāi)始流行使用圓角，如果你不使用圓角，你的網(wǎng)站可能不會(huì)被列入web2.0網(wǎng)站。主要問(wèn)題是，你至少需要4個(gè)圖片（每個(gè)角一個(gè)）和一些JS或復(fù)雜的層來(lái)實(shí)現(xiàn)圓角。
這些將成為過(guò)去了！兩行就足夠了。讓我給你個(gè)例子：
HTML:
This is easy
css 代碼:
.round {
background-color: #666;
color: #fff;
line-height: 20px;
width: 200px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
這里是上面的截屏:

那么，有什么新東西？實(shí)際上CSS3的聲明是border-radius。到目前為止，這個(gè)特性尚未確定，眾多瀏覽器生產(chǎn)商通過(guò)前綴支持該屬性。Firefox使用 -moz- ， Safari使用 -webkit-
這里同樣支持你選擇哪個(gè)角使用圓角，這可以通過(guò)使用“TopLeft TopRight BottomRight BottomLeft”實(shí)現(xiàn)。示例：
# -moz-border-radius-topleft / -webkit-border-top-left-radius
# -moz-border-radius-topright / -webkit-border-top-right-radius
如果可能你想要使用圓角功能，但是想要其它瀏覽器表現(xiàn)同樣的效果，看這里。
邊框
另外一個(gè)令人興奮的CSS3新的border特性是支持border-image。這樣你就能為每一個(gè)獨(dú)立的角和邊框定義一個(gè)圖片。
border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
使用的圖片可以是這樣的：

border的另一個(gè)非常幫的特性是使用gradientcolors，而不是用圖片：

CSS 代碼：
.bordercolor{
border: 8px solid #000;
-moz-border-bottom-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
-moz-border-top-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
-moz-border-left-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
-moz-border-right-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
width:200px;}
目前只有Firefox3支持這個(gè)特性，所以在Safari和Opera無(wú)法使用。

上一頁(yè)12 3 下一頁(yè) 閱讀全文

上一篇：CSS實(shí)例:超酷的網(wǎng)站導(dǎo)航按鈕

下一篇：CSS教程:條件注釋的格式以及作用