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

2022-11-21 15:29:41 浏览数 (2)

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

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

实现代码很简单,效果还是很不错:

代码语言:javascript复制
background: linear-gradient(90deg, #EE884C 0%, #FFBA8E 100%);

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

实现代码:

代码语言:javascript复制
    background-image: linear-gradient(to right, #0d6efd, #2aeb91);

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

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

线性渐变

background-image: linear-gradient( 角度 , 颜色);

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

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

角度

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

角度值的写法: 在0~360之间的数字后面加上deg,指定过渡在哪个方向结束。

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

也就是说,

代码语言:javascript复制
background-image: linear-gradient(to top, #7A88FF, #7AFFAF);

等价于:

代码语言:javascript复制
background-image:linear-gradient(0deg, #7A88FF, #7AFFAF);

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

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

0 人点赞