纯CSS实现圆角效果
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>
<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>
- 评论
-
- [使用Ctrl+Enter键可以直接提交]
表情图标
![[smile]](images/face1/icon_smile.gif){kind=icon}
![[confused]](images/face1/icon_confused.gif){kind=icon}
![[cool]](images/face1/icon_cool.gif){kind=icon}
![[cry]](images/face1/icon_cry.gif){kind=icon}
![[eek]](images/face1/icon_eek.gif){kind=icon}
![[angry]](images/face1/icon_angry.gif){kind=icon}
![[wink]](images/face1/icon_wink.gif){kind=icon}
![[sweat]](images/face1/icon_sweat.gif){kind=icon}
![[lol]](images/face1/icon_lol.gif){kind=icon}
![[stun]](images/face1/icon_stun.gif){kind=icon}
![[razz]](images/face1/icon_razz.gif){kind=icon}
![[redface]](images/face1/icon_redface.gif){kind=icon}
![[rolleyes]](images/face1/icon_rolleyes.gif){kind=icon}
![[sad]](images/face1/icon_sad.gif){kind=icon}
![[yes]](images/face1/icon_yes.gif){kind=icon}
![[no]](images/face1/icon_no.gif){kind=icon}
![[heart]](images/face1/icon_heart.gif){kind=icon}
![[star]](images/face1/icon_star.gif){kind=icon}
![[music]](images/face1/icon_music.gif){kind=icon}
![[idea]](images/face1/icon_idea.gif){kind=icon}
Advertise
Category
Time Counter
离十一还有
Recent Article
- 1.亦舒经典作品语录
- 2.工作笔记：AS3加载外部图片,有加载百分比
- 3.document.documentElement和document.body的区别
- 4.100种增加网站流量的方法
- 5.用div+css模拟表格对角线
- 6.如何做一个好的技术型领导
- 7.苍井空是谁？
- 8."心态"新解
- 9.程序员特有的9个坏习惯
- 10.AS3入门之简单Loading效果
- 11.系统问题：浏览器无法打开png图片
- 12.AS3中以post和get方式提交数据
- 13.defaultTextFormat和setTextFormat()区别
- 14.AS3中超方便地遍历xml
- 15.pv3d中物体常用的移动属性
- 16.开源Flash 3D引擎Papervision3d
- 17.as3 判断鼠标滚轮前滚或后滚
- 18.js:行向上替换滚动效果
- 19.为什么要清净?(禅与佛)
- 20.扩展window.setTimeout方法
Statistics
Recent Comments
Archive
Links
Support
TOP
