那些复杂的颜色实现

渐变边框颜色

设计大大的精妙稿子,怎么能不去实现呢(🤷摊手.png)!

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

实现思路:

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

核心代码:

js 复制代码
<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);
}

动态渐变背景色

css 复制代码
background: linear-gradient(106deg, rgba(77, 176, 0, 0.16) 0%, rgba(77, 176, 0, 0.08) 100%);

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

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

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

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

核心代码:

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

完整代码:

html 复制代码
// 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即可。

核心代码:

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

完整代码:

less 复制代码
// 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兼容性好像还好~,移动端应该可以使用的~~~

参考文档:

相关推荐
寻找沙漠的人17 分钟前
前端知识补充—CSS
前端·css
GISer_Jing29 分钟前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_7482455230 分钟前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v42 分钟前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing1 小时前
开源白板新方案:Plait 同时支持 Angular 和 React 啦!
前端·开源·github
2401_857600951 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600951 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL1 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
2402_857583491 小时前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js
web150850966412 小时前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app