在线客服系统源码开发实战总结:渐变色效果的实际运用效果
2023-02-18 15:37:02 时间
css里面有个背景色渐变色的效果,我们能拿来做什么呢
现在就演示下,我在开发此页面时所实际实现的样子 演示页面-唯一在线客服系统
实现代码很简单,效果还是很不错:
background: linear-gradient(90deg, #EE884C 0%, #FFBA8E 100%);
首页里也有个渐变色的运用 唯一在线客服系统
实现代码:
background-image: linear-gradient(to right, #0d6efd, #2aeb91);
花哨的样式尽量是少用,但是要能用到点缀的地方,会极大的增加页面的丰富性。
也会让页面显得更有设计感
线性渐变
background-image: linear-gradient( 角度 , 颜色);
线性渐变是最基本的渐变类型。这种渐变在一条直线上从一个颜色过渡到另一个颜色。
这条直线的方向由角度指定,或者在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字,例如 to bottom left。
角度
渐变方向也不局限于只能使用关键字,还可以使用角度值指定渐变的方向。
角度值的写法:
在0~360之间的数字后面加上deg,指定过渡在哪个方向结束。
例如, 0deg 表示元素的顶边,所以过渡从底边开始,到顶边结束。
也就是说,
background-image: linear-gradient(to top, #7A88FF, #7AFFAF);
等价于:
background-image:linear-gradient(0deg, #7A88FF, #7AFFAF);
角度的值按顺时针方向旋转,因此,90deg 表示元素的右边(与 to right 相同),180deg 表示元素的底边(与 to bottom 相同),270deg 表示元素的左边(与 to left 相同)。
使用角度值时,浏览器会绘制一条经过元素中心点的假象线。指定的角度就是这条线的角度,同时还指明过度在哪里结束。
相关文章
- Kubernetes 的 CI/CD 管道概述
- ChatGPT初体验|在 ChatGPT 中运行容器或Kubernetes?
- [Briefings in Bioinformatics|论文简读]NetTDP:基于互换的真实发现比例的差异性共表达网络分析
- [IEEE Trans Med Imaging | 论文简读] Av-CasNet:OCT血管成像中的微血管全自动分割与区分
- [Information Sciences | 论文简读] DA-Net:用于多变量时间序列分类的双注意力网络
- 如何验证Kubernetes YAML Files
- 利用php脚本+redis,生成CSV测试文件,重复率为20%
- [MySQL]索引
- [MySQL]brew 安装 配置 操作 mysql(中文问题)
- [MySQl]MySQL忘记密码
- [MySQL]增加用户 授权 远程登录
- [编程题目]泥塑课
- How can I learn to program?
- 学渣的心酸(求职篇)
- 时间复杂度问题
- 测试Flask应用_学习笔记
- Flask模板_学习笔记
- 初学Flask(1)
- 今天安装了麒麟系统
- 看球时的随笔——“如何掌握新的知识”