在线客服系统源码开发实战总结：渐变色效果的实际运用效果

雷迪森博客 2023-11-30 139 0

css里面有个背景色渐变色的效果，我们能拿来做什么呢

现在就演示下，我在开发此页面时所实际实现的样子演示页面-唯一在线客服系统

实现代码很简单，效果还是很不错：

background: linear-gradient(90deg, #EE884C 0%, #FFBA8E 100%);

首页里也有个渐变色的运用唯一在线客服系统

实现代码：

花哨的样式尽量是少用，但是要能用到点缀的地方，会极大的增加页面的丰富性。

也会让页面显得更有设计感

线性渐变

线性渐变是最基本的渐变类型。这种渐变在一条直线上从一个颜色过渡到另一个颜色。

这条直线的方向由角度指定，或者在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字，例如 to bottom left。

角度

渐变方向也不局限于只能使用关键字，还可以使用角度值指定渐变的方向。

角度值的写法：

在0~360之间的数字后面加上deg，指定过渡在哪个方向结束。

例如， 0deg 表示元素的顶边，所以过渡从底边开始，到顶边结束。

也就是说，

等价于：

background-image:linear-gradient(0deg, #7A88FF, #7AFFAF);

角度的值按顺时针方向旋转，因此，90deg 表示元素的右边（与 to right 相同），180deg 表示元素的底边（与 to bottom 相同），270deg 表示元素的左边（与 to left 相同）。

使用角度值时，浏览器会绘制一条经过元素中心点的假象线。指定的角度就是这条线的角度，同时还指明过度在哪里结束。

夸智网