web前端—前端三剑客之css(3)：圆角样式及渐变色

目录

圆角样式

复合写法

单例写法

渐变色

---

圆角样式

复合写法

圆角样式如同margin一样，可以单独对每个边角的小圆设置一个不一样的半径值。

单个属性值：四个小圆的半径相同                  border-radius：50%;

两个属性值：左上与右下，左下与右上                 border-radius：50% 30%;  

三个属性值：左上 右上与左下 右下                  border-radius：50px 30px 20px; 

单例写法

border-top-left-radius:50%;                /*左上角小圆半径*/

border-top-right-radius:30px;              /*右上角小圆半径*/

border-bottom-right-radius:30px;           /*右下角小圆半径*/

border-bottom-left-radius:30%;           /*左下角小圆半径*/ 

border-radius不仅可以接受长度值，还可以接受百分比值。这个百分比值会基于元素的尺寸进行解析，即宽度用于水平半径的解析，而高度用于垂直半径的解析。

    
    
    
    
    


    


    


    
单例模式设置圆角角度

    
通过矩形设置圆角得到椭圆

    

渐变色

渐变可以用来做背景颜色还可以做背景图片使用，渐变常用有线性渐变和径向渐变

    
    
    
    
    


    
线性渐变

    
线性渐变，设置颜色渐变方向

    
线性渐变，设置渐变色的百分比

    
线性渐变，斜角方向渐变

    
线性渐变，角度值旋转

    
径向渐变

    
重复线性渐变

    
重复径向渐变

    
渐变设置背景图片

repeating-linear-gradient() 和 repeating-radial-gradient()。 它们的工作方式跟linear-gradient()和radial-gradient()差不多，只有一点不同：色标是无限循环重复的，直到填满整个背景。