#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)