软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > 又一例纯Css实现的圆角 代码简洁

又一例纯Css实现的圆角 代码简洁

  感谢 www.52webui.com 的投稿

  以前,烈火发表过很多Css圆角的文章,有纯Css的,有Css+图像结合的,今天收到我爱设计网站长的投稿,是一款纯Css实现的圆角效果,代码简洁,没有太多美化,请大家学习与欣赏:

  Css部分:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<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部分:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<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"> 烈火学院 Liehuo.Net
</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b></div>

  运行演示:


提示:可修改后代码再运行!

    相关阅读
    栏目导航
    推荐软件