CSS实现透明内层+渐变边框的优雅方案

效果展示

实际应用场景 ：毛玻璃效果，希望有渐变边框的同时，内层也是渐变背景（需要透最外面的背景色）

解决

border-image 方案❌

/* 这个方法不行 */

直接用 border-image会破坏圆角效果：border-image和 border-radius是互斥的

.element {
  border: 1px solid;
  border-image: linear-gradient(...) 1;
  border-radius: 22px; /* 这个会失效！ */
}

伪元素和CSS mask✔

<!-- template -->
<div class="wrap">
    <div class="content">
        test
    </div>
</div>

// css
.wrap {
    position: relative;
    border-radius: 22px;

    /* 用伪元素实现边框 */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 22px;
        padding: 0.55px; /* 边框宽度 */
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.06) 100%
        );
        
		/* 关键：mask技术实现"边框挖空"效果 */
        mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    /* 内容区域在伪元素之上 */
    & > * {
        position: relative;
        z-index: 1;
    }
}

/* 内层内容区域 */
.content {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
}

1. 伪元素的妙用

   使用 ::before伪元素专门负责边框绘制

   主元素保持透明，不干扰背景显示，伪元素的层级在内容之下（z-index: 0）

2. mask

   它的工作原理：

   创建两个相同的蒙版

   第一个蒙版覆盖 content-box（内容区域）

   第二个蒙版覆盖整个元素

   使用 xor运算，实现"挖空"效果，只保留边框区域