CSS小课堂之线性渐变

使用 background-image: linear-gradient(); 来创建线性渐变。

语法

linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

例子

知道你看不懂语法,直接上例子。

  • 最简单的双色值渐变,渐变方向默认向下:background-image: linear-gradient(#cdf0ff, #0ca0e9);
  • 指定渐变方向,向上:background-image: linear-gradient(to top, #cdf0ff, #0ca0e9);
  • 指定渐变角度,顺时针45度:background-image: linear-gradient(45deg, #cdf0ff, #0ca0e9);
  • 指定颜色起始停靠点:background-image: linear-gradient(#cdf0ff 0%, #0ca0e9 10%);
  • 指定三种颜色:background-image: linear-gradient(#0ca0e9, #cdf0ff, #0ca0e9);
snipaste_20170627_133701.png

参考

推荐阅读更多精彩内容