css中的背景色渐变

渐变：

利用background-image: ;

线性渐变

linear-gradient(to 方向, 颜色1, 颜色2 ...颜色n)

• 至少两种颜色

• 方向可组合（ 左上to left top…

• 方向也可为角度 (?deg,颜色,颜色)

  • 以十二点钟到六点钟为分界线，十二点钟为0deg，六点钟为180deg

  • 十二点钟为起点，两边分别去到六点钟

  • 右边为正，从0-180deg

  • 左边为负，从0-(-180deg)

    

  • linear-gradient(to 方向, 颜色1 范围1px 范围2px, 颜色2 范围11px 范围22px) 颜色截断分界

    • 若范围重复，不重叠，效果为上一次效果
      

  • linear-gradient(to 方向, 颜色1 范围1px 范围2px, transparent 范围11px 范围22px) 透明色
    

  • repeating-linear-gradient(to 方向, 颜色1, 颜色2) 重复括号内渐变直到占满

    • 可用,相隔，重复镶嵌
      

​

径向渐变

radial-gradient(形状,颜色1, ..., 颜色n);

形状：

• 两种值：

  1. ellipse 椭圆 (默认

     • ellipse 宽px 高px 设置方形大小

     • ellipse 宽px 高px at x y 设置中心位置。(x、y可为百分比或px)

     • 同样可以颜色截断

       • 无视圆半径颜色
       • 截断不接轨时，中间空的地方会自动进行模糊效果

     • 同样可重复

  2. circle 圆

     • circle ?px 设置圆半径大小

     • circle 半径px at x y 设置圆心位置。(x、y可为百分比或px)

     • 同样可以颜色截断（无视圆半径

       • 颜色截断不接轨时，中间空的地方会自动进行模糊效果

     • 同样可重复