+ -
当前位置:首页 → 问答吧 → 纯CSS实现圆角效果

纯CSS实现圆角效果

时间:2010-07-15

来源:互联网

css果然强大,不需要用图片,也可以实现圆角效果

  1. <html>
  2. <head>
  3. <title>纯CSS实现圆角效果</title>
  4. <style type="text/CSS">
  5. div.RoundedCorner{background: #9bd1fa}
  6. b.rtop, b.rbottom{display:block;background: #fff}
  7. b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9bd1fa}
  8. b.r1{margin: 0 5px}
  9. b.r2{margin: 0 3px}
  10. b.r3{margin: 0 2px}
  11. b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
  12. </style>
  13. </head>
  14. <body>
  15. <div class="RoundedCorner">
  16. <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
  17. <br>无图片纯CSS实现圆角框<br><br>
  18. <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
  19. </div>
  20. </body>
  21. </html>




文章来源:http://www.phphubei.com/thread-326-1-1.html~~~

作者: phphubei   发布时间: 2010-07-15

试试,顶下。。。

作者: axiebin   发布时间: 2010-07-15

试了一下,效果很不错,顶。。

作者: axiebin   发布时间: 2010-07-15

你的圆角方案的 长 宽 高 怎么设置啊?

作者: axiebin   发布时间: 2010-07-15

又学到了!!哈哈!

作者: 710568673   发布时间: 2010-07-15

不错,这是效果就是我想要的。

作者: alextan   发布时间: 2010-07-19

很好很强大!!!!

作者: 小白鼠   发布时间: 2010-07-21

可以在RoundedCorner中给个height width,不错,代码很简洁,支持楼主下!

作者: qishuai   发布时间: 2010-07-21

效果很明显

作者: 13148199   发布时间: 2010-08-02

不知道怎么回事。我在firefox中没效果。

作者: pangwawayu   发布时间: 2010-08-10

开什么玩笑啊,我在火狐中试的就有效果啊,你再好好的调试一下~

作者: yuejianqiang   发布时间: 2010-08-11

相关阅读 更多

热门下载

更多