樣式表文件：
.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; 
border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; 
border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff; 
border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}

接著看頁面代碼：
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
當(dāng)然你也可以用其他的標(biāo)簽<P>或者<span><a>之類，應(yīng)該也是可以的

在上面兩句之間加上一個(gè)左右border的content
這就是效果了：
CSS+DIV制作頁面圓角效果

看明白了嗎？我們來仔細(xì)分析一下代碼吧：
CSS+DIV制作頁面圓角效果

    好不容易才做好這張圖，也不知道怎么表現(xiàn)更加清楚，我相信大家應(yīng)該能看得懂吧，原理就是在象素做圖。是不是很有意思呢～css的功能真的好強(qiáng)大啊，明白原理后就能舉一反三設(shè)計(jì)出許多樣式了，讓我們大膽的設(shè)計(jì)出各種效果吧，堅(jiān)信css能實(shí)現(xiàn)的，
標(biāo)簽：圓角效果

相關(guān)文章

隨機(jī)推薦