天蠶在你身邊
不方便打電話?讓天蠶聯(lián)絡(luò)你
天蠶在你身邊
不方便打電話?讓天蠶聯(lián)絡(luò)你
重慶網(wǎng)絡(luò)公司:網(wǎng)站建設(shè)專家教您如何通過DIV+CSS實(shí)現(xiàn)圓角邊框
天蠶編者語:我們?cè)诮o企業(yè)建網(wǎng)站時(shí),我們?yōu)榱藢?shí)現(xiàn)最佳的或合適的視覺效果,我們總是采用一些特殊效果或者采用漂亮的特效,可是這些效果,在我們網(wǎng)頁設(shè)計(jì)稿子進(jìn)行轉(zhuǎn)換成HTML代碼時(shí),為會(huì)是一個(gè)難題,因?yàn)镈IV它的自我實(shí)現(xiàn)一些作圖軟件的特效是很吃力甚至是無法實(shí)現(xiàn),并且,它讓網(wǎng)頁變得非常“重”,瀏覽者在打開網(wǎng)頁時(shí)變得非常緩慢,為此,一個(gè)優(yōu)秀的網(wǎng)頁制作人員或公司,都總是從各個(gè)角度去考慮網(wǎng)站制作時(shí)帶來的因素。而通過DIV+CSS實(shí)現(xiàn)圓角邊框的效果,就由其的重要了。
下面我們來看看通過DIV+CSS實(shí)現(xiàn)圓角邊框的效果
上面這個(gè)范圖就是最基本的圓角框,無圖片,四個(gè)圓角全部采用標(biāo)簽繪制,兼容所有瀏覽器,無HACK,使用時(shí)只需添加一個(gè)class = " color1 "即可,下面的所有顏色方案你可以靈活自定義。
下面我們來看看,實(shí)現(xiàn)這個(gè)圓角邊框的代碼是如何寫成的:
*{margin:0;padding:0;font-size:12px;}
.wrapper{width:80%;margin:0 auto;}
/*通用樣式--容器寬度值*/
.sharp{width:30%;margin:20px auto 0;float:left;margin-right:2%;}
.sharp .content div{padding:10px;text-indent:2em;}
.content{height:180px;}
h3{height:29px;line-height:29px;font-size:12px;text-indent:10px;}
a:link,a:visited{color:#999;font-weight:bold; text-decoration:none;}
a:hover{text-decoration:none; border-bottom:1px orange solid;color:orange;}
/*上圓角框通用設(shè)置樣式,如果要運(yùn)用多個(gè)不同顏色,以下6句不用重新變化--------------------------------*/
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}
如果這些代碼你看不懂的哈,這里有源代碼下載文件,提供學(xué)習(xí)者下載研習(xí)。
地址:重慶市渝中區(qū)上清寺鑫隆達(dá)B座28-8
郵編:400015
電話:023-63612462
EMAIL:cnjl_net@163.com