CSS制作无图片圆角矩形
当别人已经在用div+css时，我还在使用table；当别人已经重构、语义、可访问性时，我还刚刚掌握div+css；之前制作圆角矩形一直使用图片 拼接四个角，这种方式就是额外增加了多个图片，相对让人抓狂。
经过一段时间的琢磨，终于掌握了无图片制作圆角矩形的方法。
如上图，该矩形的圆角可表示为(4,3)即x轴上有4个象素，y轴上有3个象素，注意这里垂直方向上可认为有三行，第一行宽度为2px，其他两行宽度为 1px；水平方向上可认为有四列，其中第一二列比第三列高1px，第三列比第四列高1px。这样就给人视觉上造成一种圆角的形象，实际上计算机中也就是通 过这种方式去显示这种曲线类图形。
下面开始html
1 <div class="circleBox">
2 <div class="containerBox">
3 <span class="s1"></span><span class="s2"></span><span class="s3"></span><span class="s4"></span>
4 <div class="content">
5 <h4>这里是文字标题</h4>
6 <p>这里是一段文字，放在圆角矩形中</p>
7 <a href="http://www.51obj.cn/" title="http://www.51obj.cn/">www.51obj.cn作品</a>
8 </div>
9 <span class="s5"></span><span class="s6"></span><span class="s7"></span><span class="s8"></span>
10 </div>
11 </div>
2 <div class="containerBox">
3 <span class="s1"></span><span class="s2"></span><span class="s3"></span><span class="s4"></span>
4 <div class="content">
5 <h4>这里是文字标题</h4>
6 <p>这里是一段文字，放在圆角矩形中</p>
7 <a href="http://www.51obj.cn/" title="http://www.51obj.cn/">www.51obj.cn作品</a>
8 </div>
9 <span class="s5"></span><span class="s6"></span><span class="s7"></span><span class="s8"></span>
10 </div>
11 </div>
这里上面与下面各4个span用于定位象素。
然后是CSS
1 *{ padding:0; margin:0;}
2 .circleBox{ font-size:12px; margin-top:80px;}
3 .containerBox{ margin:0 auto; width:400px;}
4 .circleBox span{ height:1px; font-size:1px; display:block;}
5 .content{ border-left:solid 1px #d00; border-right:solid 1px #d00; height:180px; position:relative;}
6 .s1,.s8{ margin:0 5px; background:#d00;}
7 .s2,.s7{ margin:0 3px; border-left:solid 2px #d00; border-right:solid 2px #d00;}
8 .s3,.s6{ margin:0 2px; border-left:solid 1px #d00; border-right:solid 1px #d00;}
9 .s4,.s5{ margin:0 1px; border-left:solid 1px #d00; border-right:solid 1px #d00;}
10 .content,.s2,.s3,.s4,.s5,.s6,.s7{background:#fcc;}
11 .content h4{ color:#036; font-size:18px; padding:4px;}
12 .content p{ line-height:160%; font-size:12px; border-top:dotted 1px #d00; padding:4px;}
13 .content a{ position:absolute; bottom:4px; right:10px;}
2 .circleBox{ font-size:12px; margin-top:80px;}
3 .containerBox{ margin:0 auto; width:400px;}
4 .circleBox span{ height:1px; font-size:1px; display:block;}
5 .content{ border-left:solid 1px #d00; border-right:solid 1px #d00; height:180px; position:relative;}
6 .s1,.s8{ margin:0 5px; background:#d00;}
7 .s2,.s7{ margin:0 3px; border-left:solid 2px #d00; border-right:solid 2px #d00;}
8 .s3,.s6{ margin:0 2px; border-left:solid 1px #d00; border-right:solid 1px #d00;}
9 .s4,.s5{ margin:0 1px; border-left:solid 1px #d00; border-right:solid 1px #d00;}
10 .content,.s2,.s3,.s4,.s5,.s6,.s7{background:#fcc;}
11 .content h4{ color:#036; font-size:18px; padding:4px;}
12 .content p{ line-height:160%; font-size:12px; border-top:dotted 1px #d00; padding:4px;}
13 .content a{ position:absolute; bottom:4px; right:10px;}
效果见下图
考虑可重用性，可将上面更改为下种方式
1 <style type="text/css">
2 *{ padding:0; margin:0;}
3 .circleBox{ font-size:12px; margin-top:80px;}
4 .containerBox{ margin:0 auto; width:400px;}
5 .circleBox span{ height:1px; font-size:1px; display:block;}
6 .content{ height:180px; position:relative;}
7 .s1,.s8{ margin:0 5px;}
8 .s2,.s7{ margin:0 3px; border-left:solid 2px; border-right:solid 2px;}
9 .s3,.s6{ margin:0 2px; border-left:solid 1px; border-right:solid 1px;}
10 .s4,.s5{ margin:0 1px; border-left:solid 1px; border-right:solid 1px;}
11 .content h4{ color:#036; font-size:18px; padding:4px;}
12 .content p{ line-height:160%; font-size:12px; border-top:dotted 1px #d00; padding:4px;}
13 .content a{ position:absolute; bottom:4px; right:10px;}
14 /*定义样式*/
15 .boxStyle .content{ border-left:solid 1px #4B5805; border-right:solid 1px #4B5805;}
16 .boxStyle span{ border-color:#4B5805;}
17 .boxStyle .s1,.boxStyle .s8{ background:#4B5805;}
18 .boxStyle .content,.boxStyle .s2,.boxStyle .s3,.boxStyle .s4,.boxStyle .s5,.boxStyle .s6,.boxStyle .s7{background:#BFDEA0;}
19 </style>
20 </head>
21
22 <body>
23 <div class="circleBox">
24 <div class="containerBox boxStyle">
25 <span class="s1"></span><span class="s2"></span><span class="s3"></span><span class="s4"></span>
26 <div class="content">
27 <h4>这里是文字标题</h4>
28 <p>这里是一段文字，放在圆角矩形中</p>
29 <a href="http://www.51obj.cn/" title="http://www.51obj.cn/">www.51obj.cn作品</a>
30 </div>
31 <span class="s5"></span><span class="s6"></span><span class="s7"></span><span class="s8"></span>
32 </div>
33 </div>
2 *{ padding:0; margin:0;}
3 .circleBox{ font-size:12px; margin-top:80px;}
4 .containerBox{ margin:0 auto; width:400px;}
5 .circleBox span{ height:1px; font-size:1px; display:block;}
6 .content{ height:180px; position:relative;}
7 .s1,.s8{ margin:0 5px;}
8 .s2,.s7{ margin:0 3px; border-left:solid 2px; border-right:solid 2px;}
9 .s3,.s6{ margin:0 2px; border-left:solid 1px; border-right:solid 1px;}
10 .s4,.s5{ margin:0 1px; border-left:solid 1px; border-right:solid 1px;}
11 .content h4{ color:#036; font-size:18px; padding:4px;}
12 .content p{ line-height:160%; font-size:12px; border-top:dotted 1px #d00; padding:4px;}
13 .content a{ position:absolute; bottom:4px; right:10px;}
14 /*定义样式*/
15 .boxStyle .content{ border-left:solid 1px #4B5805; border-right:solid 1px #4B5805;}
16 .boxStyle span{ border-color:#4B5805;}
17 .boxStyle .s1,.boxStyle .s8{ background:#4B5805;}
18 .boxStyle .content,.boxStyle .s2,.boxStyle .s3,.boxStyle .s4,.boxStyle .s5,.boxStyle .s6,.boxStyle .s7{background:#BFDEA0;}
19 </style>
20 </head>
21
22 <body>
23 <div class="circleBox">
24 <div class="containerBox boxStyle">
25 <span class="s1"></span><span class="s2"></span><span class="s3"></span><span class="s4"></span>
26 <div class="content">
27 <h4>这里是文字标题</h4>
28 <p>这里是一段文字，放在圆角矩形中</p>
29 <a href="http://www.51obj.cn/" title="http://www.51obj.cn/">www.51obj.cn作品</a>
30 </div>
31 <span class="s5"></span><span class="s6"></span><span class="s7"></span><span class="s8"></span>
32 </div>
33 </div>
其中boxStyle中相关颜色可定义风格
