59.css-渐变色

渐变色我们一般会直接使用ui的图当背景图,那css的渐变色你们还会多少.我们常用的有线性渐变,径向渐变和扇形渐变,我们来了解一下把.准备3个盒子和一些同一的样式

  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  
      div {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 2px solid #ccc;
    }

线性渐变 conic-gradient

使用linear-gradient设置线性渐变，语法“linear-gradient(角度,颜色,颜色)”

    .box1 {
      background: linear-gradient(90deg,deeppink, yellowgreen);
     }

radial-gradient 径向渐变

语法“radial-gradient(位置,颜色,颜色)

    .box2 {
      background: radial-gradient(circle, deeppink, yellowgreen);
    }

扇形渐变 radial-gradient

前2种接触得多一点,最后一种相对少一点 语法radial-gradient(颜色,颜色)

    .box3 {
      /* background: conic-gradient(deeppink, yellowgreen); */
    }

可以设置圆环

    .box3 {
      background: conic-gradient(#f40, #f40 90deg, transparent 90deg);
    }

多彩圆环

    .box3 {
      background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); 
    }