CSS圆角背景

CSS圆角背景
通过改变层叠元素的margin值实现圆角效果.

也就是下面例子中r_a,r_b,r_c,r_d 距上层元素左右的间距逐渐变大或缩小来实现圆角

css部分

.r_top, .r_bottom {display:block; background:transparent; font-size:1px}/*左上右上角和左下右下角的容器*/
.r_a, .r_b, .r_c, .r_d {display:block; overflow:hidden}/*四个圆角*/
.r_a, .r_b, .r_c{height:1px}
.r_b, .r_c, .r_d{background:#cf6}
.r_a {margin:0 5px}
.r_b {margin:0 3px; border-width:0 2px}
.r_c {margin:0 2px}
.r_d {height:2px; margin:0 1px}

html部分

<!--左上角/右上角-->
<div class="r_top"><em class="r_a"></em><em class="r_b"></em><em class="r_c"></em><em class="r_d"></em></div>
<div class="box">
.....内容容器.....
</div>
<!--左下角/右下角-->
<div class="r_bottom"><em class="r_d"></em><em class="r_c"></em><em class="r_b"></em><em class="r_a"></em></div>

<script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=3&lang=zh"></script> <script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/bshareC0.js"></script>

阅读(101) | 评论(0) | 转发(0) |

0

上一篇：linux putty 中文字符

下一篇：CSS制作三角形的方法

相关热门文章

• 认识事物的四个阶段
• 不过徐若华却知道这个人的来头...
• “这一次上官世家前来提亲，...
• 礼品，保健
• 市场的需要推动现代数控折弯机...

• 网站导航
• UT2.0正式版下载
• tomcat6.0配置(含配置视频下载...
• Gomez中国网站用户体验排行榜(...
• IP包碎片重组过程

• linux 安全关机脚本
• cisco 3550 交换机stp学习笔记...
• 实现 Cisco 路由器的本地验证...
• Linux系统下RAID和LVM的实现...
• OpenBSD中的KDE和KDM

给主人留下些什么吧！~~

评论热议