CSS新特性:圓角邊框多欄Gird布局背景設(shè)置
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2009-04-02 19:35:22 作者:佚名
我要評(píng)論

網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介:到現(xiàn)在為止,只有一些已經(jīng)工作的CSS3特性.
到現(xiàn)在為止,只有一些已經(jīng)工作的特性,他們中的一些如下:
圓角
從web2.0開(kāi)始,開(kāi)始流行使用圓角,如果你不使用圓角,你的網(wǎng)站可能不會(huì)被列入web2.0網(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ú)法使用。
相關(guān)文章
基于CSS 屬性實(shí)現(xiàn)按鈕懸停邊框和背景動(dòng)畫(huà)集合
這篇文章主要介紹了基于CSS 屬性實(shí)現(xiàn)按鈕懸停邊框和背景動(dòng)畫(huà)集合,需要的朋友可以參考下2019-05-09- 這篇文章主要介紹了CSS 制作帶邊框背景色透明的消息框的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-03
css3 邊框、背景、文本效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了css3 邊框、背景、文本效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-21CSS3實(shí)現(xiàn)多背景模擬動(dòng)態(tài)邊框的效果
前幾天在工作的時(shí)候遇到一個(gè)問(wèn)題,項(xiàng)目需要實(shí)現(xiàn)一個(gè)效果,當(dāng)鼠標(biāo)移入一個(gè)元素的時(shí)候,元素出現(xiàn)一個(gè)動(dòng)態(tài)的邊框,通過(guò)網(wǎng)上查找資料看到有人推薦可以使用Css3來(lái)實(shí)現(xiàn),后來(lái)試了2016-11-08CSS控制背景圖像平鋪實(shí)現(xiàn)邊框陰影效果
CSS控制背景圖像平鋪,從而實(shí)現(xiàn)區(qū)域邊框陰影的效果,可貴之處是本代碼不管你需要陰影的區(qū)域是多大,它都能自動(dòng)適應(yīng),個(gè)人感覺(jué)還不錯(cuò),具體實(shí)現(xiàn)如下建議收藏下哦2013-08-25css div 邊框陰影利用背景圖或內(nèi)外層div實(shí)現(xiàn)層次感覺(jué)陰影效果
在網(wǎng)頁(yè)布局中偶爾會(huì)用到div 邊框陰影做一些特殊效果本文介紹兩種實(shí)現(xiàn)方法:一種是利用內(nèi)外層的div邊框來(lái)實(shí)例層次感覺(jué)的css邊框陰影效果,另一種是利用了背景圖片再加內(nèi)外div2012-12-18css樣式div或li在ie6下背景平鋪及border邊框斷線解決技巧
css樣式div或li在ie6下背景平鋪或邊框斷線解決辦法2011-09-04- 本文通過(guò)代碼給大家介紹css背景和邊框標(biāo)簽的一些知識(shí),通過(guò)相關(guān)屬性設(shè)置背景顏色,背景圖像,對(duì)css背景與邊框的相關(guān)知識(shí)感興趣的朋友一起看看吧2021-05-21