该属于用于设置背景颜色渐变效果
。
<!-- linear-gradient 参数含义 -->
<!-- 参数1 | 渐变方向 to top、to top right、to right、to bottom、to bottom left、to left、to top left | 下例中 to right 代表从左到右 -->
<!-- 参数2+ | 渐变颜色、一般不小于2个 | 下例中 代表 从 red - orange - yellow 这个颜色顺序渐变 -->
<div style="background-image: linear-gradient(to right, red, orange, yellow);">渐变效果</div>
显示效果
【参数一】除了使用固定的位置参数,也可以设置角度值,例如 linear-gradient(45deg)
、linear-gradient(-30deg)
,角度数从0 ~ 360
。
【参数二】可以通过%
自定义颜色的渐变区域,例如 linear-gradient(45deg, red 20%, black 80 %)
代表从红到黑渐变,红色区域 20%
,黑色区域 80%
。