实现渐变边框加圆角透明背景效果 

<!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>
posted @   走我们钓鱼去  阅读(79)  评论(0)  编辑  收藏  举报
相关博文：
· 纯CSS与HTML实现轮播图
· JS 飘窗效果
· 圆角渐变色边框
· border-image实现与圆角渐变边框实例页面
· 动态对角渐变色背景
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示