CSS中的背景颜色

渐变色

普通颜色的几种写法：
 

background: red;
background: #ffffff;
background: rgba(200, 200, 200);
background: rgba(0, 0, 0, 0.5)

渐变色的写法：

background: liner-gradient(to right, #95ca47, #4dc891)

liner-gradient: 渐变类型为线性渐变

to right：渐变方向向右

#95ca47：开始颜色

#4dc891：结束颜色

渐变方向

to right / to left 向右/向左渐变

to top / to bottom 向上/向下渐变
to right bottom / to right top向右下/向右上渐变

to left bottom / to left top向左下/向左上渐变

xxxdeg xxx范围(0到360)更精确的渐变方向

渐变位置

渐变不一定是从开始到结束，我们可以设置各种中间状态，比如在30%到70%之间渐变。可以在每个色值后面加一个百分比。如图：

更多渐变效果可以参考MDN文档https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients