使用CSS实现圆角Div（无图片）

最新推荐文章于 2024-04-29 12:00:00 发布

sven_xu

最新推荐文章于 2024-04-29 12:00:00 发布

阅读量356

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/sven_xu/article/details/46323535

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns=" http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body{ margin:0; padding:20px; font-size:12px; line-height:1.8em; }
#nifty{ background: #014477;}
#nifty span{ padding:20px; color:#FFF; display:block;}
.rtop, .rbottom{ display:block; background:#FFF}
.rtop div, .rbottom div{ display:block; height:1px; overflow:hidden; background: #014477}
.r1{margin: 0 7px}
.r2{margin: 0 5px}
.r3{margin: 0 3px}
.r4{margin: 0 2px}
.rtop .r5, .rbottom .r5{margin: 0 1px;height: 2px}
</style>
<title>圆角边框</title>
</head>
<body>
<div id="nifty">
<div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div><div class="r5"></div></div>
<span class="text">第三种方法不用到图片，原理是通过div的嵌套和div设置的margin值的递增来实现圆角 </span>
<div class="rbottom"><div class="r5"></div><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</div>
<p>这个圆角框可以自由伸展，四个方向都能自适应，而且，不用图片</p>
<p><a href=" http://www.zknight.net" >返回骑士的博客</a></p>
</body>
</html>

sven_xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用CSS实现圆角Div（无图片）

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> body{ margin:0; padding:20px; font-size:12px; line-height:1.8em; } #nifty{ background: #014477;} #nifty
复制链接

扫一扫

专栏目录