前言
不要图片？CSS实现圆角边框渐变色+背景通明，最近在工作中经常实现这些成果，速速来Get吧~
文末分享源代码。记得点赞+关注+珍藏！
1.实现成果
2.实现原理
border-image：
border-image CSS 属性容许在元素的边框上绘制图像。这使得绘制简单的外观组件更加简略，也不必在某些状况下应用九宫格了。应用 border-image 时，其将会替换掉border-style 属性所设置的边框款式。
咱们都晓得，实现一个边框渐变色能够用border-image，然而border-image不反对圆角；那么如何通过一些办法，去实现边框圆角呢？
border-image: linear-gradient( 115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b ) 2 2;3.实现步骤
办法一：
background-clip ：content-box, border-box
毛病：背景无奈通明background-clip：规定背景的绘制区域
语法：
background-clip: border-box|padding-box|content-box;| 值 | 形容 |
|---|---|
| border-box | 背景被裁剪到边框盒 |
| padding-box | 背景被裁剪到内边距框 |
| content-box | 背景被裁剪到内容框 |
background-origin:
background-Origin属性指定background-position属性应该是绝对地位。
留神如果背景图像background-attachment是"固定"，这个属性没有任何成果。
- 绘制一个标签，为其设置相应的宽高
<div class="flex-column j_c">background-clip</div>div { cursor: pointer; position: relative; width: 180px; height: 60px; font-size: 15px; color: #e2fffd; transition: all 0.5s ease-in-out; position: relative;}设置背景色彩为边框色彩+元素背景色，设置background-origin，以及background-clip，并设置通明色边框
div:nth-child(1) { --bg: linear-gradient(180deg, #346575 0%, #1a283b 100%); --border: linear-gradient(270deg, #455364, #aec9e9, #455364); border: 1px solid transparent; /* var(--bg)背景色 var(--border)边框色 */ background-image: var(--bg), var(--border); background-origin: border-box; background-clip: content-box, border-box; border-radius: 10px;}- 该办法不能设置通明色的背景
办法二：
伪元素叠加
毛病：背景无奈通明
- 绘制一个标签，设置背景色彩为边框渐变色的色值，设置绝对定位，层级设置为1
<div class="flex-column j_c">伪元素</div>div:nth-child(2) { z-index: 1; width: 180px; height: 60px; border-radius: 10px; background: linear-gradient(270deg, #455364, #aec9e9, #455364);}- 为其增加一个伪元素，宽度设置为100% - 2px（对应为边框的宽高），设置背景色，层级为-1，防止遮挡内容区域
div:nth-child(2)::after { content: ""; position: absolute; /* 设置层级为-1，防止遮挡内容 */ z-index: -1; width: calc(100% - 2px); height: calc(100% - 2px); background: linear-gradient(180deg, #27a6a7 0%, #054146 100%); left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 10px;}- 该办法不能设置通明色的背景
办法三：
mask遮罩
能够实现背景通明，能满足应用需要mask：CSS 属性 mask 容许使用者通过遮罩或者裁切特定区域的图片的形式来暗藏一个元素的局部或者全副可见区域。
mask-image：mask-image CSS 属性设置了用作元素蒙版层的图像。默认状况下，这意味着蒙幅员像的 alpha 通道将与元素的 alpha 通道相乘，相似于background-image；
mask-clip：CSS属性确定受遮罩影响的区域。元素的绘制内容必须限度在这个区域，相似background-clip；
content-box：绘制的内容被裁剪到内容框中；
padding-box：绘制的内容被裁剪到填充框；mask-composite：CSS属性示意在以后遮罩层及其下方的遮罩层上应用的合成操作；规范属性下有4种；
mask-composite: add; /* 叠加（默认） */mask-composite: subtract; /* 减去，排除掉下层的区域 */mask-composite: intersect; /* 相交，只显示重合的中央 */mask-composite: exclude; /* 排除，只显示不重合的中央 */-webkit-mask-composite：非标准：此性能是非规范的，不在规范轨道上。该-webkit-mask-composite属性指定利用于同一元素的多个蒙幅员像互相合成的形式。蒙幅员像的合成程序与应用-webkit-mask-image属性申明的程序相同。
-webkit-mask-composite: clear; /*革除，不显示任何遮罩*/-webkit-mask-composite: copy; /*只显示上方遮罩，不显示下方遮罩*/-webkit-mask-composite: source-over; -webkit-mask-composite: source-in; /*只显示重合的中央*/-webkit-mask-composite: source-out; /*只显示上方遮罩，重合的中央不显示*/-webkit-mask-composite: source-atop;-webkit-mask-composite: destination-over;-webkit-mask-composite: destination-in; /*只显示重合的中央*/-webkit-mask-composite: destination-out;/*只显示下方遮罩，重合的中央不显示*/-webkit-mask-composite: destination-atop;-webkit-mask-composite: xor; /*只显示不重合的中央*/- 定义圆角变量--border-radius，边框宽度--border-width，边框渐变色--border-color
div:nth-child(3){ --border-radius: 10px; --border-width: 1px; --border-color: linear-gradient( 270deg, rgba(69, 83, 100, 1), rgba(126, 145, 169, 1), rgba(69, 83, 100, 1) );}- 绘制一个div标签，设置宽高，border-radius为--border-radius，及带有透明度的背景色
<div class="flex-column j_c">mask</div>div:nth-child(3){ width: 200px; height: 80px; position: relative; color: #fff; border-radius: var(--border-radius); background: rgba(38, 70, 93, 0.2); backdrop-filter: blur(10px);}- 增加伪元素，宽高为父元素统一，圆角设置为--border-radius，设置padding为--border-width（即为边框的大小），背景色为--border-color
div:nth-child(3)::after{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: var(--border-width); border-radius: var(--border-radius); background: var(--border-color); }- 伪元素设置mask遮罩,mask-clip，以及mask-composite的合成形式
/* 轻易定义一个色彩 */--mask-bg: linear-gradient(red, red);--mask-clip: content-box, padding-box;-webkit-mask-image: var(--mask-bg), var(--mask-bg);-webkit-mask-clip: var(--mask-clip);/* exclude排除，只显示不重合的中央,Firefox反对4个属性 */mask-composite: exclude;/* 只显示下方遮罩，重合的中央不显示 */-webkit-mask-composite: destination-out;- 根据上述的办法，通过扭转自定义变量，实现不同的圆角边框渐变色并且背景通明
办法四：
border-image + overflow: hidden
背景能够设置通明，边框内不是圆角，边框宽度和圆角幅度不能设置的随便
- 绘制一个div标签，设置宽高
<div class="flex-column j_c">border-image + overflow</div>div:nth-child(7) { width: 200px; height: 100px; border-radius: 10px; box-shadow: 4px 2px 4px 0px rgba(0, 0, 0, 0.2);}- 增加伪元素，设置border-image
div:nth-child(7):after { content: ""; position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 4px solid; border-image: linear-gradient( 115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b ) 2 2;}为标签设置overflow:hidden,暗藏溢出
div:nth-child(7) { overflow: hidden;}- 边框内不是圆角，边框宽度和圆角幅度不能设置的随便
办法五：
clip-path
背景能够设置通明，边框内不是圆角，边框宽度和圆角幅度不能设置的随便clip-path：clip-path CSS 属性应用裁剪形式创立元素的可显示区域。区域内的局部显示，区域外的暗藏。
- 绘制div标签，设置宽高与border-image
div:nth-child(8) { width: 100px; height: 100px; border: 4px solid; border-image: linear-gradient(270deg, #18f77f, #17ffff) 1 1;}- 设置clip-path进行裁剪
div:nth-child(8) { clip-path: inset(0 round 10px);}- 与办法四统一，边框内不是圆角，边框宽度和圆角幅度不能设置的随便
4.实现代码
<style>section { width: 460px;}div { cursor: pointer; position: relative; width: 180px; height: 60px; margin-bottom: 20px; margin-right: 20px; font-size: 15px; color: #e2fffd; transition: all 0.5s ease-in-out; position: relative;}div:hover { filter: brightness(1.3);}div:nth-child(1) { --bg: linear-gradient(180deg, #346575 0%, #1a283b 100%); --border: linear-gradient(270deg, #455364, #aec9e9, #455364); border: 1px solid transparent; /* var(--bg)背景色 var(--border)边框色 */ background-image: var(--bg), var(--border); background-origin: border-box; background-clip: content-box, border-box; border-radius: 10px;}div:nth-child(2) { z-index: 1; width: 180px; height: 60px; border-radius: 10px; background: linear-gradient(270deg, #455364, #aec9e9, #455364);}div:nth-child(2)::after { content: ""; position: absolute; /* 设置层级为-1，防止遮挡内容 */ z-index: -1; width: calc(100% - 2px); height: calc(100% - 2px); background: linear-gradient(180deg, #27a6a7 0%, #054146 100%); left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 10px;}div:nth-child(3),div:nth-child(4),div:nth-child(5),div:nth-child(6) { --border-radius: 10px; --border-width: 1px; --border-color: linear-gradient( 270deg, rgba(69, 83, 100, 1), rgba(126, 145, 169, 1), rgba(69, 83, 100, 1) ); width: 200px; height: 80px; position: relative; color: #fff; border-radius: var(--border-radius); background: rgba(38, 70, 93, 0.2); backdrop-filter: blur(10px);}div:nth-child(3)::after,div:nth-child(4)::after,div:nth-child(5)::after,div:nth-child(6)::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: var(--border-width); border-radius: var(--border-radius); background: var(--border-color); /* 轻易定义一个色彩 */ --mask-bg: linear-gradient(red, red); /* 相似background-clip */ --mask-clip: content-box, padding-box; /* mask容许使用者通过遮罩或者裁切特定区域的图片的形式来暗藏一个元素的局部或者全副可见区域 */ /* mask-image相似background-image 设置了用作元素蒙版层的图像，默认值为none，值为通明图片，或通明突变 */ -webkit-mask-image: var(--mask-bg), var(--mask-bg); /* 默认值为border-box，可选值与background-origin雷同 */ -webkit-mask-clip: var(--mask-clip); /* exclude排除，只显示不重合的中央,Firefox反对4个属性 */ mask-composite: exclude; /* 只显示下方遮罩，重合的中央不显示 */ -webkit-mask-composite: destination-out;}div:nth-child(4) { --border-color: linear-gradient( 180deg, rgba(44, 135, 124, 1), rgba(95, 250, 255, 1), rgba(63, 166, 156, 1) ); background: transparent; box-shadow: -4px 2px 4px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 12px 0px rgba(92, 242, 246, 0.61);}div:nth-child(5) { --border-width: 3px; --border-radius: 50%; --border-color: linear-gradient(180deg, #18f77f, #17ffff); background: transparent; width: 100px; height: 100px;}div:nth-child(6) { --border-width: 2px; --border-radius: 100px 0 0 100px; --border-color: linear-gradient( 180deg, rgba(151, 151, 151, 0.3), rgba(131, 150, 162, 1), rgba(151, 151, 151, 0.3) ); width: 180px; height: 100px; background: rgba(20, 97, 125, 0.06); box-shadow: 4px 2px 4px 0px rgba(0, 0, 0, 0.2); backdrop-filter: blur(4px);}div:nth-child(7) { width: 200px; height: 100px; border-radius: 10px; box-shadow: 4px 2px 4px 0px rgba(0, 0, 0, 0.2); overflow: hidden;}div:nth-child(7):after { content: ""; position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 4px solid; border-image: linear-gradient( 115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b ) 2 2;}div:nth-child(8) { width: 100px; height: 100px; border: 4px solid; border-image: linear-gradient(270deg, #18f77f, #17ffff) 1 1; clip-path: inset(0 round 10px);}</style><body><section class="flex-wrap"> <!-- 办法一：background-clip ：content-box, border-box，背景无奈通明--> <div class="flex-column j_c">background-clip</div> <!-- 办法二：伪元素叠加，背景无奈通明 --> <div class="flex-column j_c">伪元素</div> <!-- 办法三 :mask遮罩 背景色带通明 --> <div class="flex-column j_c">mask</div> <!-- mask遮罩 背景通明 --> <div class="flex-column j_c">背景通明</div> <!-- mask遮罩 背景通明 --> <div class="flex-column j_c">通明圆角</div> <div class="flex-column j_c">半圆</div> <!-- 办法四： border-image + overflow: hidden 边框内不是圆角 --> <div class="flex-column j_c">border-image + overflow</div> <!-- 办法五：clip-path 边框内不是圆角--> <div class="flex-column j_c">clip-path</div></section></body>5.写在最初
看完本文如果感觉对你有一丢丢帮忙，记得点赞+关注+珍藏鸭
参考链接
奇妙实现带圆角的突变边框
CSS 实现优惠券的技巧-对于mask遮罩局部