CSS 渐变边框

方法1: 外层包一个box，box设置背景渐变，padding为边框的宽度，例如 padding：1px

<div class="outer-box"><div class="inner-box">这里是内容</div>
</div>//css
.outer-box {padding: 1px; /* 边框宽度 */border-radius: 16px; /* 边框圆角 */background: linear-gradient(180deg,rgba(255,255,255,0.1),rgba(255,255,255,0.2));
}.inner-box {border-radius: 14px; /* 内层要比外层小一点 */background: #090910; /* 内部背景色 */
}

方法2: border-image，但是不支持圆角

.content{border: 2px solid transparent;border-image: linear-gradient(180deg,rgba(255,255,255,0.1),rgba(255,255,255,0.2)) 1;
}

方法3:伪元素 + mask,支持圆角

.content {position: relative;border-radius: 16px; /* 可选圆角 */
}.content::before {content: "";position: absolute;inset: 0;padding: 2px; /* 边框宽度 */border-radius: inherit;background: linear-gradient(180deg,rgba(255,255,255,0.1),rgba(255,255,255,0.2));-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude; /* 让中间镂空 */pointer-events: none;
}