CSS小课堂之线性渐变
2017-06-27 本文已影响14人
前端小透明
使用 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
