又一例純Css實(shí)現(xiàn)的圓角 代碼簡潔
來源：程序員人生 發(fā)布時(shí)間：2013-12-24 01:14:23 閱讀次數(shù)：3478次
感謝 www.52webui.com 的投稿
以前，發(fā)表過很多Css圓角的文章，有純Css的，有Css+圖像結(jié)合的，今天收到我愛設(shè)計(jì)網(wǎng)站長的投稿，是一款純Css實(shí)現(xiàn)的圓角效果，代碼簡潔，沒有太多美化，請大家學(xué)習(xí)與欣賞：
Css部分：
<style>
#roundhorn01{width:161px; height:auto;}
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b0{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b0{border-left:1px solid #30b1e5;border-right:1px solid #30b1e5;}
.b1,.b1b{margin:0 5px;background:#30b1e5;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:#ECF7FB;}
.k0{height:auto;}
</style>
HTML部分：
<div id="roundhorn01"> <b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b0 d1 k0"> 學(xué)院 Liehuo.Net
</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b></div>
運(yùn)行演示：
提示：可修改后代碼再運(yùn)行!
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
