div+css实现圆角矩形的几种方法

最新推荐文章于 2021-06-30 18:56:11 发布

weixin_33712881

最新推荐文章于 2021-06-30 18:56:11 发布

阅读量1.1k

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/472798

版权

1.css3实现圆角矩形，兼容性有问题

 
     
          <div id= 
          "round" 
          ></div> 
         
 
          #round { 
         
 
               
          padding 
          : 
          10px 
          ;  
          width 
          : 
          300px 
          ;  
          height 
          : 
          50px 
          ; 
         
 
               
          border 
          :  
          5px  
          solid  
          #dedede 
          ; 
         
 
               
          -moz-border-radius:  
          15px 
          ;       
          /* Gecko browsers */ 
         
 
               
          -webkit-border-radius:  
          15px 
          ;    
          /* Webkit browsers */ 
         
 
               
          border-radius: 
          15px 
          ;             
          /* W3C syntax */ 
         
 
          } 
         
 
   

css3的，很多小的浏览器不兼容，360之类的.

2.拼图的方法实现圆角矩形

 
     
          <style type= 
          "text/css" 
          > 
         
 
          .b 
          1 
          ,.b 
          2 
          ,.b 
          3 
          ,.b 
          4 
          ,.b 
          1 
          b,.b 
          2 
          b,.b 
          3 
          b,.b 
          4 
          b,.b{ 
          display 
          : 
          block 
          ; 
          overflow 
          : 
          hidden 
          ;} 
         
 
          .b 
          1 
          ,.b 
          2 
          ,.b 
          3 
          ,.b 
          1 
          b,.b 
          2 
          b,.b 
          3 
          b{ 
          height 
          : 
          1px 
          ;} 
         
 
          .b 
          2 
          ,.b 
          3 
          ,.b 
          4 
          ,.b 
          2 
          b,.b 
          3 
          b,.b 
          4 
          b,.b{ 
          border-left 
          : 
          1px  
          solid  
          #999 
          ; 
          border-right 
          : 
          1px  
          solid  
          #999 
          ;} 
         
 
          .b 
          1 
          ,.b 
          1 
          b{ 
          margin 
          : 
          0  
          5px 
          ; 
          background 
          : 
          #999 
          ;} 
         
 
          .b 
          2 
          ,.b 
          2 
          b{ 
          margin 
          : 
          0  
          3px 
          ; 
          border-width 
          : 
          2px 
          ;} 
         
 
          .b 
          3 
          ,.b 
          3 
          b{ 
          margin 
          : 
          0  
          2px 
          ;} 
         
 
          .b 
          4 
          ,.b 
          4 
          b{ 
          height 
          : 
          2px 
          ; 
          margin 
          : 
          0  
          1px 
          ;} 
         
 
          .d 
          1 
          { 
          background 
          : 
          #F7F8F9 
          ;} 
         
 
          .k { 
          height 
          : 
          300px 
          ;} 
         
 
          </style> 
         
 
          </head> 
         
 
          <body> 
         
 
          <div> 
         
 
          <b class= 
          "b1" 
          ></b><b class= 
          "b2 d1" 
          ></b><b class= 
          "b3 d1" 
          ></b><b class= 
          "b4 d1" 
          ></b> 
         
 
          <div class= 
          "b d1 k" 
          > 
         
 
          <font style= 
          "font-size:26px;color:red; margin:0px 10px;" 
          >简洁型css圆角矩形</font> 
         
 
          </div> 
         
 
          <b class= 
          "b4b d1" 
          ></b><b class= 
          "b3b d1" 
          ></b><b class= 
          "b2b d1" 
          ></b><b class= 
          "b1b" 
          ></b> 
         
 
          </div> 
         
 
   

不过这个在ie7下有问题，下面的会和上面的脱节，所以最好用css hack解决一下.~

css hack

3，直接图片吧，最简单的方式

不过自适应高度的话有些问题，所以小改进一下

 
     
          < 
          style 
          > 
         
 
               
          .top{backgroup:上边带弧度的一小部分} 
         
 
               
          .bottom{backgroup:下边带弧度的一小部分} 
         
 
               
          .content{border-left:1px solid 颜色;border-right:1px solid 颜色} 
         
 
          </ 
          style 
          > 
         
 
          < 
          p  
          class 
          = 
          "top" 
          ></ 
          p 
          > 
         
 
          < 
          div  
          class 
          = 
          "content" 
          ></ 
          div 
          > 
         
 
          < 
          p  
          class 
          = 
          "bottom" 
          ></ 
          p 
          > 
         
 
   

这种方式可能也有兼容性的问题，用position解决吧..

最近写网页发现一个问题.~在出现兼容性的问题的时候，发现ie7下和360下是完全一样的问题。。所以如果老板要必须兼容360浏览器的话，那就解决了ie7就可以了~

本文转自 3147972 51CTO博客，原文链接：http://blog.51cto.com/a3147972/1216062，如需转载请自行联系原作者

weixin_33712881

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div+css实现圆角矩形的几种方法

1.css3实现圆角矩形，兼容性有问题12345678<div id="round"></div>#round {padding:10px;width:300px;height:50px;border:5pxsolid#dedede;-moz...
复制链接

扫一扫