hooyantsing's Blog

P56_6_元素背景渐变色作用

字数统计: 96阅读时长: 1 min
2020/04/13

P56 6 元素背景渐变色作用

linear-gradient()

background:渐变色

1
2
3
4
//参数:旋转角度(默认垂直渐变,90deg水平渐变) 颜色array
background: linear-gradient(90deg,red,green,blue);
//向左|右渐变
background: linear-gradient(to left | right,red,green,blue);

技巧

左右设置相同颜色,中间设置同色调稍微重一点的颜色,起到颜色变化的效果,视觉更佳。

7df6782894f99b21bfdfc7bffc94a396.png

5f63034c964ba1991b2b4e5cc7dab721.png

CATALOG