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