如何用CSS实现炫酷的双圆形加矩形线性渐变效果？

渐变容器矩形圆形 778 来源： 2025-03-19

要实现一个炫酷的双圆形加矩形线性渐变效果，可以使用CSS的background属性、linear-gradient、radial-gradient以及clip-path等技术。以下是一个示例代码，展示如何实现这种效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双圆形加矩形线性渐变效果</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #1a1a1a;
        }

        .container {
            position: relative;
            width: 300px;
            height: 300px;
            background: linear-gradient(45deg, #ff9a9e, #fad0c4);
            border-radius: 20px;
            overflow: hidden;
        }

        .circle {
            position: absolute;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, #a1c4fd, #c2e9fb);
            border-radius: 50%;
        }

        .circle1 {
            top: -50px;
            left: -50px;
        }

        .circle2 {
            bottom: -50px;
            right: -50px;
        }

        .rectangle {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
            clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="circle circle1"></div>
        <div class="circle circle2"></div>
        <div class="rectangle"></div>
    </div>
</body>
</html>

代码解析：

body 样式：
- 设置页面的背景颜色为深色（#1a1a1a），并将内容居中显示。
.container 样式：
- 设置一个300x300像素的容器，背景使用线性渐变（linear-gradient），颜色从#ff9a9e到#fad0c4。
- 设置圆角边框（border-radius: 20px）和溢出隐藏（overflow: hidden），以确保内部元素不会超出容器。
.circle 样式：
- 设置两个圆形元素，每个圆形的尺寸为150x150像素，背景使用径向渐变（radial-gradient），颜色从#a1c4fd到#c2e9fb。
- 使用position: absolute将圆形定位在容器的左上角和右下角，并通过负值（top: -50px; left: -50px）使圆形部分超出容器边界。
.rectangle 样式：
- 设置一个矩形元素，覆盖整个容器，背景使用线性渐变（linear-gradient），颜色从#fbc2eb到#a6c1ee。
- 使用clip-path属性将矩形裁剪为上半部分，形成一种层叠效果。

效果：

容器背景是一个线性渐变的矩形。
两个圆形元素分别位于容器的左上角和右下角，背景为径向渐变。
矩形元素覆盖在容器上，但只显示上半部分，形成一种层叠的视觉效果。

你可以根据需要调整颜色、尺寸和位置，进一步定制这个效果。

上一篇：如何用JavaScript模拟鼠标悬停事件显示Ant Design Popover？

下一篇：本地JS文件打包上线后失效，是什么原因？

如何用CSS实现炫酷的双圆形加矩形线性渐变效果？

代码解析：

效果：

推荐文章

热门文章