颜色渐变实现

时间：2020-05-14 16:09:32 阅读：51 评论：0 收藏：0 [点我收藏+]

ui设计图中有各种关于颜色渐变，实现其效果，所以我记录一下。
1.背景颜色渐变

效果：技术分享图片

这个表格前三行背景就是颜色渐变，使用伪类取对应行，再用linear-gradient()实现背景渐变。代码如下：

/deep/.el-table .el-table__body-wrapper tbody .el-table__row:first-child {

background: linear-gradient(

to right,

rgba(249, 3, 29, 0.7),

rgba(255, 255, 255, 0)

) !important;

}

/deep/.el-table .el-table__body-wrapper tbody .el-table__row:nth-child(2) {

background: linear-gradient(

to right,

rgba(255, 111, 0, 0.7),

rgba(255, 255, 255, 0)

) !important;

}

2.echarts环形、柱子...实现渐变

效果：

我这里引入了echarts，使用 echarts.graphic.LinearGradient()这个方法，前四个参数代码方向配置，根据自己想要的去配置对应，简单代码：

new echarts.graphic.LinearGradient(0, 0, 0, 1, [

{ offset: 0, color: ‘#2DFEB9‘ },

{ offset: 1, color: ‘#27DFA2‘ }

])

3.文字标题的渐变实现

效果：

在实现1的基础上使用css3的 background-clip去规定背景的绘制区域

background: linear-gradient(

270deg,

rgba(0, 175, 255, 1) 0%,

rgba(22, 219, 238, 1) 54%,

rgba(0, 116, 255, 1) 100%

);

background-clip: text;

-webkit-text-fill-color: transparent;

记录一下我碰到的几种渐变实现方式。

原文：https://www.cnblogs.com/wangxiaoer5200/p/12888955.html

踩

(0)

评论一句话评论（0）

分享档案

更多>