渐变边框&透明背景&圆角css

渐变边框&透明背景&圆角

不知道大家有没有碰到过设计师出的效果图类似这样的 圆角渐变边框 、而且背景还不是纯色的

image

 本文档解释了如何实现具有渐变边框和透明背景的圆角效果。废话不多说直接上代码。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient Border with Transparent Background</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
            background: linear-gradient(270deg, #ff7e5f, #feb47b);
            background-size: 400% 400%;
            animation: gradientScroll 10s ease infinite;
        }

        @keyframes gradientScroll {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .element {
            width: 200px;
            height: 200px;
            border-radius: 20px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center; 
            background-color: rgb(255,255,255,0.6);
            overflow: hidden; /* 确保内容不会溢出边框 */
        }

        .element::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: inherit;
            padding: 5px; /* 边框宽度 */
            box-sizing: border-box;
            background: linear-gradient(45deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5);
            -webkit-mask: 
                linear-gradient(#fff 0 0) content-box, 
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
        }

        .content {
            position: relative;
            z-index: 1;
            color: #000;
        }
    </style>
</head>
<body>
    <div class="element">
        <div class="content">
            <p>内容可见，背景透明。</p>
        </div>
    </div>
</body>
</html>

 

解释

HTML 结构

HTML 结构非常简单，由一个具有 element 类的 div 容器组成，该容器包含另一个具有 content 类的 div。content div 中包含可见的文本内容，并且背景是透明的。

<div class="element">
    <div class="content">
        <p>内容可见，背景透明。</p>
    </div>
</div>

CSS 样式

body 样式

body 使用 Flexbox 居中对齐，背景设置了渐变动画，使背景颜色平滑过渡。

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    background: linear-gradient(270deg, #ff7e5f, #feb47b);
    background-size: 400% 400%;
    animation: gradientScroll 10s ease infinite;
}

@keyframes gradientScroll {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

element 样式

element 类创建了一个宽高为 200px，边角圆滑（20px）的容器，背景是透明的。overflow: hidden; 确保内部内容不会溢出。

.element {
    width: 200px;
    height: 200px;
    border-radius: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    overflow: hidden; /* 确保内容不会溢出边框 */
}

渐变边框与圆角

渐变边框和圆角效果通过 ::before 伪元素实现。该伪元素覆盖了整个 element 容器，并具有以下关键属性：

1.border-radius: inherit;：确保伪元素继承父元素的圆角，使边框圆角与容器一致。
2.padding: 5px;：设置边框的宽度。
3.background: linear-gradient(45deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5);：创建边框的渐变背景。
4. 遮罩技术：
- -webkit-mask：创建一个包含透明区域（content-box）和实心区域（padding-box）的遮罩。这样可以使渐变背景的中心部分透明，从而形成渐变边框。
- mask-composite：定义重叠遮罩层的行为。destination-out 和 exclude 确保中心部分透明。

.element::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 5px; /* 边框宽度 */
    box-sizing: border-box;
    background: linear-gradient(45deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

如果再进阶，想让边框有滚动效果，那么再上面的样式加一个动画即可：如

animation: border-glow 5s linear infinite;
@keyframes border-glow {
  0% { background: linear-gradient(45deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5); }
  50% { background: linear-gradient(220deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5); }
  100% { background: linear-gradient(360deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5); }
}

 

转： https://blog.csdn.net/2301_80817413/article/details/139509635

 

posted @ 2025-08-21 14:45  与f  阅读(65)  评论(0)    收藏  举报