CSS理解之padding--非原创

因为在慕课网观看了张大神的视频，学习到了一点东西，向和大家分享。视频地址

代码如下：

   DOCTYPE html  > 
   html   lang  ="zh-CN"  > 
   head  > 
       meta   charset  ="UTF-8"  > 
       title  > CSS理解之padding   title  > 
       style   type  ="text/css"  >  
        .wrap   {  
            width  :   150px  ;  
            padding  :   20px  ;  
            border  :   2px solid #ccc  ; 
         }  

        .line-tri   {  
            width  :   150px  ;  
            height  :   30px  ;  
            padding  :   15px 0  ;  
            border-top  :   30px solid #000  ;  
            border-bottom  :   30px solid #000  ;  
            background-color  :   #000  ;  
            background-clip  :   content-box  ; 
         }  

        .eye   {  
            width  :   150px  ;  
            height  :   150px  ;  
            padding  :   10px  ;  
            border  :   10px solid #000  ;  
            border-radius  :   50%  ;  
            background-color  :   #000  ;  
            background-clip  :   content-box  ; 
         } 
       style  > 
   head  > 
   body  > 
       实现大队长的三道杠，百度网盘里面的切换图案  --> 
       div   class  ="wrap"  > 
           div   class  ="line-tri"  >  div  > 
       div  > 
       br   /> 
       br   /> 
       br   /> 
       实现"白眼"效果  --> 
       div   class  ="eye"  >  div  > 
   body  > 
   html  >  

查看更多关于CSS理解之padding--非原创的详细内容...