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

参考

• 文静的ppt
• MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient
• Codepen：https://codepen.io/binbin/pen/NgwReO