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> 
      
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。