css:css3(圆角边框、盒子阴影、文字阴影)

1、圆角边框

定义圆角边框后,可以将盒子定义为圆角的

(1)长度方式



    
        
        盒子模型外边距
        
    
    
    
   

css:css3(圆角边框、盒子阴影、文字阴影)_第1张图片

 

设置成高度的一半:



    
        
        
        
    
    
       

css:css3(圆角边框、盒子阴影、文字阴影)_第2张图片

 

 

(2)百分比方式

圆形:长度为正方形的一半:



    
        
        盒子模型外边距
        
    
    
       

css:css3(圆角边框、盒子阴影、文字阴影)_第3张图片

 

 百分比方式定义盒子:



    
        
        
        
    
    
       

css:css3(圆角边框、盒子阴影、文字阴影)_第4张图片

 

 
(3)不同的角设置不同的圆角

以左上角为起点,顺时针的方式



    
        
        
        
    
    
       

css:css3(圆角边框、盒子阴影、文字阴影)_第5张图片

 

 (4)选择角去设置:



    
        
        
        
    
    
       

css:css3(圆角边框、盒子阴影、文字阴影)_第6张图片

 

 

2、盒子阴影

css:css3(圆角边框、盒子阴影、文字阴影)_第7张图片

 

 (1)前两个为必选项,后四个可写可不写



    
        
        
        
    
    
       

css:css3(圆角边框、盒子阴影、文字阴影)_第8张图片

 

(2) 只写前两个属性:



    
        
        
        
    
    
       

css:css3(圆角边框、盒子阴影、文字阴影)_第9张图片

 

 

3、文字阴影

css:css3(圆角边框、盒子阴影、文字阴影)_第10张图片



    
        
        
        
    
    
       
人之初,性本善

 

你可能感兴趣的:(css:css3(圆角边框、盒子阴影、文字阴影))