返回顶部

收藏

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

标签:css

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. 博主 发表 2017-12-02 00:00:00 Web Animation API - 在 JavaScript 中释放 CSS keyframes
  2. Airen 发表 2018-01-09 15:37:38 CSS Grid和Flexbox解决实际的布局问题
  3. Airen 发表 2018-01-06 18:23:35 理解CSS布局和BFC
  4. 博主 发表 2017-12-20 16:32:46 CSS selector simplifier regular expression in Java
  5. xubiao.zhuang 发表 2017-12-28 15:08:19 杨浩涌:将军赶路,莫追小兔
  6. Aaron 发表 2017-12-23 16:00:00 谈谈css的加载及加载循序
  7. 设计 达人 发表 2017-12-20 13:30:28 小创意:圣诞球切换开关
  8. zak 发表 2017-12-19 02:20:44 css禁止鼠标事件
  9. Leon 发表 2017-12-19 13:28:08 通过css修改select下拉列表框的默认样式
  10. asuncool@gmail.com(y 发表 2017-12-15 03:32:59 网页加载了CSS,却不生效的奇葩问题
  11. 米豆网 - 1000seo 发表 2017-12-05 08:32:33 纯css 实现 Star Rating
  12. zee 发表 2017-01-18 03:57:48 按钮加载效果实现

发表评论