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

最新推荐文章于 2024-07-09 15:49:17 发布

宇珩前端记录

最新推荐文章于 2024-07-09 15:49:17 发布

阅读量1.3k

点赞数 47

分类专栏： CSS效果分享文章标签： css 前端

本文链接：https://blog.csdn.net/2301_80817413/article/details/139509635

版权

CSS效果分享专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

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

在这里插入图片描述

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

全部代码

<!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: transparent;
            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;
}