background: linear-gradient 使用

#01. CSS 线性渐变linear-gradient

请注意即使是通过渐变生成的背景，其本质还是属于背景图片而不是背景颜色，本文中采用的简写背景属性background: linear-gradient是（正确）background-image: linear-gradient 简写，而非（错误）background-color: linear-gradient

#02. 颜色，位置

linear-gradient(red 0 20%, blue 80% 100%) // 0 到20% 为红色，20% 到80% 为渐变过度，80% 到100% 为蓝色

background-image: linear-gradient(red 20%, blue 80%); // （颜色在前，位置在后）
相当于：background-image: linear-gradient(red 0 20%, blue 80% 100%); // 默认省略最前的0，与最后面的100%

#03. 使用角度，方向

to top -> 0deg // 从下到上
to right -> 90deg
to bottom -> 180deg
to left -> -90deg(或270deg)
to top left -> -45deg(或315deg) // 从右下角到左上角
to top right -> 45deg
to bottom left -> -135deg(或225deg) // 从右上角到左下角
to bottom right -> 135deg

background-image: linear-gradient(45deg,red,blue); // 从左下角到右上角

#04. 多个连续配置

background-image: linear-gradient(45deg, #e66465 25%, transparent 25%), linear-gradient(-135deg, #e66465 25%, transparent 25%), linear-gradient(135deg, #e66465 25%, transparent 25%), linear-gradient(-45deg, #e66465 25%, transparent 25%); // 可以同时使用多个配置

引用：
从零开始学习CSS线性渐变（linear-gradient） - 小泽笔记 (cssaaa.com)
深入理解CSS线性渐变linear-gradient - 小火柴的蓝色理想 - 博客园 (cnblogs.com)