实现渐变边框加圆角透明背景效果-526互联

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    .border-linear-radius {
        --border-radius: 5px;
        --border-width: 1px;
        --border-color: linear-gradient(180deg,
                rgba(44, 135, 124, 1),
                rgba(95, 250, 255, 1),
                rgba(63, 166, 156, 1));
        width: 200px;
        height: 80px;
        position: relative;
        color: #fff;
        border-radius: var(--border-radius);
        background: rgba(125, 70, 93, 0.2);
        backdrop-filter: blur(10px);
    }

    .border-linear-radius::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;
    }

    body {
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: blue;
        color: #fff;
        overflow: hidden;
        height: 100vh;
    }
    </style>
    <title>渐变边框+圆角透明背景效果</title>
</head>

<body>
    <div class="linear-border-radius">背景透明</div>
</body>

</html>