CSS实现圆角边框的完美解决方案

时间 2019-11-13
标签 css 实现圆角边框完美解决方案栏目 CSS 繁體版
原文原文链接
css实现图片圆角，兼容全部浏览器：css
 
       <style type= 
       "text/css" 
       > 
      
 
       /*通用样式--容器宽度值*/ 
      
 
       .sharp{ 
       width 
       : 
       907px 
       ; 
       height 
       : 
       606px 
       ; 
       margin-top 
       : 
       20px 
       ; 
      
 
       float 
       : 
       left 
       ; 
       margin-left 
       : 
       10px 
       ; 
       display 
       : 
       inline 
       ;} 
      
 
       .sharp .content div{ 
       padding 
       : 
       10px 
       ; 
       text-indent 
       : 
       2em 
       ;} 
      
 
       .content{ 
       height 
       : 
       598px 
       ;} 
       /*这个高度值等于图片的高度值-8px*/ 
      
 
       /*圆角框通用设置样式，若是要运用多个不一样颜色，如下部分不用从新变化--------------*/ 
      
 
       .b 
       1 
       ,.b 
       2 
       ,.b 
       3 
       ,.b 
       4 
       ,.b 
       5 
       ,.b 
       6 
       ,.b 
       7 
       ,.b 
       8 
       { 
       height 
       : 
       1px 
       ;  
      
 
       font-size 
       : 
       1px 
       ;  
       overflow 
       : 
       hidden 
       ;  
       display 
       : 
       block 
       ;} 
      
 
       .b 
       1 
       ,.b 
       8 
       { 
       margin 
       : 
       0  
       5px 
       ;} 
      
 
       .b 
       2 
       ,.b 
       7 
       { 
       margin 
       : 
       0  
       3px 
       ; 
       border-right 
       : 
       2px  
       solid 
       ;  
       border-left 
       : 
       2px  
       solid 
       ;} 
      
 
       .b 
       3 
       ,.b 
       6 
       { 
       margin 
       : 
       0  
       2px 
       ; 
       border-right 
       : 
       1px  
       solid 
       ;  
       border-left 
       : 
       1px  
       solid 
       ;} 
      
 
       .b 
       4 
       ,.b 
       5 
       { 
       margin 
       : 
       0  
       1px 
       ; 
       border-right 
       : 
       1px  
       solid 
       ;  
       border-left 
       : 
       1px  
       solid 
       ;  
       height 
       : 
       2px 
       ;} 
      
 
       .content { 
       border-right 
       : 
       1px  
       solid 
       ; 
       border-left 
       : 
       1px  
       solid 
       ; 
       overflow 
       : 
       hidden 
       ;} 
      
 
       /*图片偏移定位--上面部分*/ 
      
 
       .sharp b.b 
       2 
       { 
       background-position 
       : 
       -4px  
       top 
       ;} 
      
 
       .sharp b.b 
       3 
       { 
       background-position 
       : 
       -2px  
       -1px 
       ;} 
      
 
       .sharp b.b 
       4 
       { 
       background-position 
       : 
       -1px  
       -2px 
       ;} 
      
 
       /*图片偏移定位--下面部分*/ 
      
 
       .sharp b.b 
       7 
       { 
       background-position 
       : 
       -4px  
       bottom 
       ;} 
      
 
       .sharp b.b 
       6 
       { 
       background-position 
       : 
       -2px  
       bottom 
       ;} 
      
 
       .sharp b.b 
       5 
       { 
       background-position 
       : 
       -1px  
       bottom 
       ;} 
      
 
       /*颜色方案一----------------------------------------*/ 
      
 
       /*边框色*/ 
      
 
       .color 
       1  
       .b 
       2 
       ,.color 
       1  
       .b 
       3 
       ,.color 
       1  
       .b 
       4 
       ,.color 
       1  
       .b 
       5 
       ,.color 
       1 
      
 
         
       .b 
       6 
       ,.color 
       1  
       .b 
       7 
       ,.color 
       1  
       .content{ 
       border-color 
       : 
       #dce4f5 
       ;} 
      
 
       .color 
       1  
       .b 
       1 
       ,.color 
       1  
       .b 
       8 
       { 
       background 
       : 
       #dce4f5 
       } 
      
 
       /*图片路径*/ 
      
 
       .color 
       1  
       .b 
       2 
       ,.color 
       1  
       .b 
       3 
       ,.color 
       1  
       .b 
       4 
       ,.color 
       1  
       h 
       3 
       ,.color 
       1  
       .b 
       5 
       ,.color 
       1  
       .b 
       6 
       ,.color 
       1  
       .b 
       7 
       ,.color 
       1  
      
 
       .content{ 
       background 
       : 
       url 
       (http://www.hello- 
       code 
       .com/usr/uploads/ 
       2012 
       / 
       10 
       / 
       4085139866 
       .png) 
      
 
         
       no-repeat 
       ;} 
      
 
       .color 
       1  
       .content{ 
       background-position 
       : 
       left  
       -4px 
       ;} 
      
 
       </style> 
      