乐趣区

关于css:不要图片CSS实现圆角边框渐变色背景透明

jiezi

前言

👏不要图片？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 遮罩局部

退出移动版