最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
分享 用CSS实现无图片圆角效果
时间:2008-01-26 编辑:简简单单 来源:一聚教程网
css圆角效果,IE6, firefox均显示正常
代码如下 | 复制代码 |
<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> |
将上面的代码保存成html格式的文档,用浏览器打开即可看到效果。
-
上一个: 高度100%的绝对定位自适应布局
-
下一个: div下图片自适应解决方法
相关文章
- 用CSS实现各种图片滤镜效果演示 12-26
- CSS 阴影效果(无需图片即可实现) 02-08
- CSS去掉图片img边框及如何防止图片撑破DIV 01-05
- CSS Sprites图片不清晰的问题(2倍的 CSS Sprites 如何缩放) 12-16
- css中input标签与图片按钮对不齐解决方法 06-10
- css实现圆角三角形例子(无图片) 03-26