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

用户注册

投稿取消

文章分类:

还能输入300字

上传中....

热门文章更多>>

标签更多>>

word左右居中纵向分布 word左右居中对齐 word左右居中对齐怎么设置 word标题回车后为正文 word标题回车后直接分页 word标题回车后中间空了好大一段 word里面行距怎么调整无法缩小 word里面行距一直很大 word里面行距怎么设置在哪里 word试卷格式文档怎么打印 word试卷格式排版 word中隐藏文字打印 word中隐藏文字快捷键 word中隐藏文字在哪里

专题更多>>

最新文章更多>>

好好的23669298

用纯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>