简洁圆角框(div+css)

最新推荐文章于 2025-08-23 08:00:22 发布

weixin_30949361

最新推荐文章于 2025-08-23 08:00:22 发布

阅读量72

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/jRoger/articles/1810407.html

本文介绍了一种使用DIV和CSS实现圆角效果的方法。通过精心设计的HTML结构和CSS样式，可以在不使用图片的情况下制作出上下圆角的效果。这种方法能够使内部元素自由填充，适用于网页布局中需要圆角样式的设计。

1 <!DOCTYPE
2 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html
6 xmlns="http://www.w3.org/1999/xhtml">
7 <head>
8 <meta http-equiv="Content-Type" content="text/html;
9 charset=utf-8" />
10 <title>DIV+CSS两个圆角效果</title>
11
12 <style type="text/css">
13 .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
14
15 .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
16 .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid
17 #999;border-right:1px solid #999;}
18 .b1,.b1b{margin:0 5px;background:#999;}
19 .b2,.b2b{margin:0 3px;border-width:2px;}
20 .b3,.b3b{margin:0 2px;}
21 .b4,.b4b{height:2px;margin:0 1px;}
22 .d1{background:#F7F8F9;}
23 #min_height{min-height:300px;}
24 </style>
25 </head>
26
27 <body>
28 <div>
29 <b class="b1"></b>
30 <b class="b2 d1"></b>
31 <b class="b3 d1"></b>
32 <b class="b4 d1"></b>
33 <div class="b d1" id="min_height">
34 DIV+CSS两个圆角效果,往这个里面放元素可以自由填充
35 </div>
36 <b class="b4b d1"></b>
37 <b class="b3b d1"></b>
38 <b class="b2b d1"></b>
39 <b class="b1b"></b>
40 </div>
41 </body>
42 </html>

转载于:https://www.cnblogs.com/jRoger/articles/1810407.html