那些复杂的颜色实现

渐变边框颜色

设计大大的精妙稿子，怎么能不去实现呢（🤷摊手.png）！

之前合作的设计师，给的一个视觉稿子效果图，里面有个解锁区域的边框渐变效果，大致如下图所示。 边框是一个透明度从0%->100%->0%->83%->6%的渐变效果再叠加了一个外发光，实现难点主要实现一个渐变边框线。

实现思路：

div层添加圆角度，后续通过伪元素，添加一个特殊（transparent->red->transparent->red->transparent）渐变的mask层。

核心代码：

<div class="con">哈哈哈</div>
// css
.con {
  min-height: 130px;
  position: relative;
  border-radius: 8px;
}
.con:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 0.01rem solid #dbc091;
  border-radius: inherit;
  -webkit-mask: lineargradient(to right bottom,transparent,red,transparent,red,transparent);
}

动态渐变背景色

background: linear-gradient(106deg, rgba(77, 176, 0, 0.16) 0%, rgba(77, 176, 0, 0.08) 100%);

涉及到实际的业务动态下发的需求场景，它的实现需要再斟酌一下。

业务场景：接口下发一个纯色颜色值（rgb或者hex都有可能）效果展示上需要实现背景色为指定颜色colorA的一个渐变从透明度16%到8%。

方案一：纯色背景上叠加白色透明渐变（无黑夜模式适配首选）

具体思路如下所示，在色块上方叠加一个白色固定透明度即可

核心代码：

background: linear-gradient(to right bottom, rgba(255,255,255, .84), rgba(255,255,255, .92)), #4DB000;

完整代码：

// dom
<div class="card" style="--color: red">哈哈哈</div>
// css
.card {
  background: linear-gradient(to right bottom, rgba(255,255,255, .84), rgba(255,255,255, .92)), var(--color);
  min-height: 130px;
}

缺点： 无法适配黑夜模式or透过显示部分底层元素

方案二：纯色背景+mask

具体思路如下所示，在背景色块上添加一个任意颜色（此次为了简写用的#000）渐变mask即可。

核心代码：

background: #4DB000;
-webkit-mask: linear-gradient(to right bottom, rgba(0,0,0,.86), rgba(0,0,0,.08))

完整代码：

// dom
<div class="card" style="--color: red">哈哈哈</div>
// css
.card {
  position: relative;
  min-height: 130px;
}
.card::before{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color);
  -webkit-mask: linear-gradient(to right bottom, rgba(0,0,0,.86), rgba(0,0,0,.08))
}

body {
  background: url('./img.jpg')
}

效果图

（PS：此处为看效果，左上方的Alpha由0.16改成0.46了） 兼容性： -webkit-mask兼容性好像还好～，移动端应该可以使用的～～～

参考文档：

• CSS实现渐变色边框（Gradient borders）的5种方法