纯CSS实现圆角效果
时间：2010-07-17
来源：互联网
css果然强大，不需要用图片，也可以实现圆角效果
- <html>
- <head>
- <title>纯CSS实现圆角效果</title>
- <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>无图片纯CSS实现圆角框<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>
作者: 柒児 发布时间: 2010-07-17
楼主厉害，没想到还有这个功能。学习了。
作者: qixiaodui 发布时间: 2010-07-25
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
