用纯css制作的圆角框，兼容全部浏览器

简写了它，一个css制作圆角框，兼容全部浏览器，虽然的确是费事了点 <无>

b{display:block;height:1px;background:#f6f6f6;overflow:hidden;}
     .w300{width:300px;margin:0 4px;background:#ccc;}   /*第一角度*/
     .w300-2{width:300px;margin:0 3px;}                 /*第二脚度*/
     .w302{width:302px;margin:0 2px;}                   /*第三脚度*/
     .w304{width:304px;margin:0 1px;height:2px;}        /*第四脚度*/
    
 
    .b-l-r{border-left:1px #ccc solid;border-right:1px #ccc solid;}   /*它的左右圆角border*/
   .text-box{background:#f6f6f6;width:306px;height:100px;text-align:center;}    /*中间部分*/
   .text-box span{line-height:100px;color:#f00;}
   </style>

   <body>
         <b class="w300"></b>                  <!--上两角-->
         <b class="w300-2 b-l-r"></b>
         <b class="w302 b-l-r"></b>
         <b class="w304 b-l-r"></b>
        <div class="text-box b-l-r">
                 <span>圆角框</span>
        </div>

        <b class="w304 b-l-r h2"></b>            <!--下两脚-->
         <b class="w302 b-l-r"></b>
          <b class="w300-2 b-l-r"></b>
           <b class="w300"></b>
       </body>
   </html>

相关文章：

你感兴趣的文章：

标签云：