1. 爱易网页
  2. HTML教程
  3. 用div+css兑现无图圆角边框

用div+css兑现无图圆角边框

日期：2014-05-17　 浏览次数：20613 次

用div+css实现无图圆角边框
<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: #FFFFFF}
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>
无图片实现圆角框
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<br>

<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>

相关资料更多>

  1. css换行的有关问题
  2. spring MVC rest 阻截js css jpg等文件
  3. chrome的框架页面中怎样查看页面的url?解决方案
  4. CSS怎么实现背景颜色渐变
  5. TBCompressor 2.4.2淘宝团队用的js css压缩工具 咫尺浪子
  6. div页面置顶的有关问题（）
  7. 想问一下王长上的一些效果都是如何实现的
  8. 在google浏览器下瞅就看不到导航，在ie8里看就能看到。 有图
  9. HTML编辑器UEditor的简略使用