【CSS】线性渐变、径向渐变

线性渐变

语法background-image：linear-gradient（方向，颜色1，颜色2…）

• 水平竖直方向 默认从上到下
  • to left 去到左边 从右往左
    • to right去到右边 从左往右
    • to top去到上边 从下往上
    • to bottom默认
• 对角线方向
  • to left top
  • to right top
    • to left top
    • to left bottom
• 角度写法

渐变突变
background-iamge：linear-gradient（）；
两段颜色写在同一个位置

<style>
    div {
      width: 400px;
      height: 500px;
      border: 1px solid #000;
      margin: 50px;
      /* 方向默认为从上到下 */
      background-image: linear-gradient(red, blue);
      /* 颜色可以写多个 */
      background-image: linear-gradient(red, blue, green);

      /* 方向的写法 */
      /* 01.上下左右 */
      /* 去到左边 从右到左 */
      background-image: linear-gradient(to left, red, blue);
      background-image: linear-gradient(to right, red, blue);
      background-image: linear-gradient(to top, red, blue);
      /* 默认 */
      background-image: linear-gradient(to bottom, red, blue);

      /* 02.对角线 */
      /* 去到右上角 从左下角到右上角 */
      background-image: linear-gradient(to right top, red, blue);
      /* 顺序可以互换 */
      background-image: linear-gradient(to top right, red, blue);

      /* 03.角度 */
      /* 正值增加是顺时针  负值增加是逆时针 */
      /* 180deg是默认值 从上到下 */
      /* 0deg是从下到上 */
      background-image: linear-gradient(0deg, red, blue);

      /* 渐变突变 */
      /* 70%到75%之间只有5%的渐变区域 */
      background-image: linear-gradient(red 70%, blue 75%);
      /* 70%到70%之间只在一根线上渐变，只要渐变区域够小，可以忽略不计，得到纯色色块，也叫突变*/
      background-image: linear-gradient(red 70%, blue 70%);

      /* 红黄蓝 */
      background-image: linear-gradient(red 33.3%, yellow 33.3%, yellow 66.6%, blue 66.6%);
    }
</style>

径向渐变
background-iamge：radial-gradient（方向，颜色……）；

• shape 渐变的形状
  • 默认 椭圆形
  • 圆形 circle

at position 渐变中心点的位置 方向

• 水平和垂直方向的值
  • 数值
  • 百分比 参考元素的高度的百分比
  • 水平方位词 left right center
  • 垂直方位词 top bottom center
• 如果位置只有方位词，顺序可以换
• 如果只写一个值，默认另一个值是center

<style>
    div {
      width: 500px;
      height: 300px;
      border: 1px solid #000;
      margin: 50px;
      /* 默认是椭圆形 */
      background-image: radial-gradient(red, blue);
      /* 渐变的形状--可以设置为圆形 */
      background-image: radial-gradient(circle, red, blue);


      /* at position 渐变中心点的位置*/
      /* 方向01+02+03 */
      /* 01.数值 */
      /* 数值的坐标系:元素左上角为原点，向右是正值，向左是负值，向上是负值，向下是正值 */
      background-image: radial-gradient(circle at 400px 300px, red, blue);
      background-image: radial-gradient(circle at 500px -30px, red, blue);
      /* 02.百分比 */
      /* 参考元素的宽高 */
      background-image: radial-gradient(circle at 100% 100%, red, blue);
      /* 03.方位词 */
      /* left right center */
      /* top bottom center */
      background-image: radial-gradient(circle at right top, red, blue);
      /* 如果位置只有方位词 顺序可以换 */
      background-image: radial-gradient(circle at top right, red, blue);
      /* 方向是可以混搭的 */
      background-image: radial-gradient(circle at 10px bottom, red, blue);
      /* 如果只写一个值，默认另外一个方向是center */
      background-image: radial-gradient(circle at bottom, red, blue);
    }
</style>

重复线性渐变

语法: background-image: repeating-linear-gradient(red 5%,blue 20%);

颜色必须是加数值或者百分比

<style>
    .box1 {
      width: 300px;
      height: 400px;
      border: 1px solid #000;
      margin: 50px;
      background-image: repeating-linear-gradient(red 5%, blue 20%);
    }
</style>
<div class="box1"></div>

💡执行结果截图

重复径向渐变

语法: background-image: repeating-radial-gradient(red 5%,blue 20%);

颜色必须是加数值或者百分比

<style>
    .box2 {
      width: 300px;
      height: 400px;
      border: 1px solid #000;
      margin: 50px;
      background-image: repeating-radial-gradient(red 5%, blue 20%);
    }
</style>
<div class="box2"></div

💡执行结果截图