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 >

 

这里上面与下面各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 ; }

 

效果见下图

预 览此效果

考虑可重用性，可将上面更改为下种方式

 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 >

 

 

其中boxStyle中相关颜色可定义风格

预览此效果

转载于:https://www.cnblogs.com/walkingp/archive/2010/02/05/1664131.html