设计 ​

渐变 ​

background-image: linear-gradient(135deg, #f5f7fa 0, #c3cfe2 100%);

background-image 属性是支持传入一个 linear-gradient 函数的，因此给元素整渐变并不会影响元素的宽高。再稍微讲讲渐变函数的几个重载。

角度 ​

上面代码的第一个参数就是，有两种值可选，135deg 和 to right 这种，第一种是填角度，第二种是填方向，哪种更灵活不必我说，角度也有多个单位可选，deg 是角度，rad 是弧度，turn 则等于 360deg，grad 是百分度，100grad = 90deg。

颜色节点 ​

后面传入的就是颜色节点了，支持传入无限个颜色节点，每个颜色节点必须传入指定颜色（废话），也可以传入位置，0，50%，1px，2em 这种单位都能传

阴影 ​

概述 ​

阴影的作用主要是给网站增加立体感，有两种属性可用于创建阴影，分别是 box-shadow 和 text-shadow，似乎之前我笔记里用过，需要传入几个值，位置、颜色、模糊半径和扩展半径，后面两个可选，位置可以填1-4个值，四个方向的默认值是 0。