圆角样式与渐变色

1. 圆角样式border-radius的样式格式

（1）单个属性值
border-radius：50px; 单个属性值：四个小圆的半径相同

（2）两个属性值
Border-radius：50px 130px; 两个属性值：左上与右下，左下与右上

（3） 三个属性值
Border-radius：50px 130px 150px; 三个属性值：左上 右上与左下 右下

2. 圆的写法

        div {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: pink;
        }

4. 渐变色

背景色渐变（background-image）支持背景图片样式
线性渐变 径向渐变

5. 线性渐变色方向

（1）从下往上

        div {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(to top, red 0%, blue 100%);
           
        }

（2）从左往右

        div {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(to right, red 0%, blue 100%);
  
        }

（3）从左上到左下

        div {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(to bottom right, red 0%, blue 100%);
        }

6. 径向渐变色

径向渐变和线性渐变的唯一不同就是添加颜色的方向，径向渐变类似画同心圆，一层层的往外面画圈圈。
默认从中间朝外面扩散，at 可控制方向
background-image: radial-gradient(at top left, red 0%, black 100%);

   div{
       width: 200px;
       height: 200px;
       margin: 100px auto;
       /* 0~20% 红； 20%~100% 黑 */
       background: radial-gradient(red 20%, black 20%);
   }

7. 重复渐变色

        div {
            width: 300px;
            height: 300px;
            background: repeating-linear-gradient(45deg, black 0, black 15px, red 15px, red 30px)
        }

        div {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: repeating-radial-gradient(black 0%, black 10%, red 10%, red 20%)
        }