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


    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 相同)。

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

  • 相关阅读:
    无线Mesh网络技术基础与应用
    BLE低功耗蓝牙关键技术解析与应用
    Android Studio NDK开发入门
    Android 注解的使用与注意事项
    图形图像处理库大全
    vs2010下C++调用lib或dll文件
    网线连接电脑共享文件传递
    分配和释放 BSTR 的内存
    #include <objsafe.h>//OCX控件在IE8浏览器下不能使用问题
    彻底搞定char/wchar_t/unicode
  • 原文地址:https://www.cnblogs.com/taoshihan/p/16888382.html
Copyright © 2020-2023  润新知