前端css 实现背景渐变，边框渐变

fruge365

发布于 2025-12-15 11:27:59

2290

效果图

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 渐变背景和边框</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            gap: 20px;
            /* 子项间距 */
        }

        .container-item {
            position: relative;
            width: 180px;
            /* 宽度 */
            height: 60px;
            /* 高度 */
            margin: 20px auto;
            /* 居中显示 */

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* 背景渐变 */
            background: linear-gradient(to left,
                    rgba(52, 152, 219, 0) 5%,
                    /* 左侧完全透明 */
                    rgba(52, 152, 219, 0.9),
                    /* 中间渐变颜色 */
                    rgba(52, 152, 219, 0)
                    /* 右侧完全透明 */
                );

            /* 边框渐变伪元素 */
            .num {
                font-family: "lcd";
                font-size: 28px;
            }
        }

        .container-item::before,
        .container-item::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(to left,
                    rgba(52, 152, 219, 0) 5%,
                    /* 左侧完全透明 */
                    rgba(52, 152, 219, 0.9),
                    /* 中间渐变颜色 */
                    rgba(52, 152, 219, 0)
                    /* 右侧完全透明 */
                );
        }

        .container-item::before {
            top: 0;
            /* 上边框 */
        }

        .container-item::after {
            bottom: 0;
            /* 下边框 */
        }

        /* 青绿色容器 */
        .container-green {
            background: linear-gradient(to left,
                    rgba(26, 188, 156, 0) 5%,
                    /* 左侧完全透明 */
                    rgba(26, 188, 156, 0.9),
                    /* 中间渐变颜色 */
                    rgba(26, 188, 156, 0)
                    /* 右侧完全透明 */
                );
        }

        .container-green::before,
        .container-green::after {
            background: linear-gradient(to left,
                    rgba(26, 188, 156, 0) 5%,
                    /* 左侧完全透明 */
                    rgba(26, 188, 156, 0.9),
                    /* 中间渐变颜色 */
                    rgba(26, 188, 156, 0)
                    /* 右侧完全透明 */
                );
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="container-item container-green">

        </div>
        <div class="container-item container-blue">

        </div>
    </div>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-12-24，如有侵权请联系 cloudcommunity@tencent.com 删除

container