css渐变

三种类型的渐变：

• 线性 (由 linear-gradient 函数创建)
• 径向(由 radial-gradient函数创建)
• 圆锥 (由 conic-gradient 函数创建)

渐变提示

可以在两个颜色中再添加一个参数，这个参数即可设定这两个颜色从什么位置开始渐变。

image.png

image.png

改变渐变方向

水平渐变

image.png

image.png

对角渐变

image.png

image.png

角度渐变
渐变方向：0deg 代表渐变方向为从下到上, 90deg 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。 而负角度意味着逆时针方向。

颜色终止位置
可以设置百分比或者任意绝对数值来设置它们的终止位置
0%表示开始位置，100%表示结束位置

image.png

image.png

创建色带和条纹
颜色后面所带的两个参数：一个代表渐变开始的位置，另一个是渐变结束的位置

image.png

image.png

叠加渐变

image.png

堆叠渐变
还可以将渐变一层一层的堆叠上来，只有上面的渐变是透明的，下面的渐变就可以被看见

#dv {
    height: 200px;
    background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

image.png