.

css无图片实现圆角框
分类:电脑知识 发表于:2010-07-21 22:09:48 评论(6)


<html>

<head>

<title>css圆角效果</title>

<meta http-equiv="content-type" content="text/html; charset=gb2312">

<style type="text/css">

div.RoundedCorner{background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}

b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

</style>

</head>

<body>

<div class="RoundedCorner">

<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>

<br>无图片实现圆角框<br><br>

<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>

</div>

</body>

</html>

  
邮箱: 密码:
  • Lvtu (2010-07-27 21:09:51)
    这么喜欢折腾,就折腾一个运行代码啦。。。 得之,我幸;失之,我命。如是而已!
    • 阿和 博主 (2010-07-28 07:30:37)
      我才不喜欢折腾啊啊啊啊啊啊!!! 
  • Lvtu (2010-07-25 17:01:19)
    晕!你都禁止了怎么复制呀?不要告诉我另外一个地址哦! 呵呵~~ 增加一个“运行”代码功能吧! 得之,我幸;失之,我命。如是而已!
    • 阿和 博主 (2010-07-27 12:32:41)
      嘿嘿,值得考虑~~~ .......... 那个。。。我还是直接把这页面弄成可以复制的好了,简单方便。。。 
  • Lvtu (2010-07-22 19:54:21)
    没有演示? 无图无真相。。。 得之,我幸;失之,我命。如是而已!
    • 阿和 博主 (2010-07-22 20:10:40)
      代码复制过去运行一下不就知道啦