CSS 技巧总结：如何用径向渐变实现弯曲框缺口效果

IT 文章3周前发布小编

本文分享了一种基于 CSS 径向渐变（radial-gradient）实现弯曲框缺口效果的实用技巧，相比传统图片或 SVG 方案，该方法更灵活、性能更优，以下是核心内容梳理：

一、核心原理：用径向渐变“挖”出透明缺口

弯曲框缺口效果的本质是通过 radial-gradient 径向渐变，在元素指定位置创建透明圆形区域，从而形成视觉上的弯曲缺口。其基础语法与逻辑如下：

1. 基础 DEMO 与语法解析

通过简单代码可快速理解核心逻辑，实现“右下角透明缺口”的示例：

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box {
            width: 200px;
            height: 100px;
            /* 径向渐变实现右下角透明缺口 */
            background: radial-gradient(circle at right bottom, transparent 20px, red 20px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

circle at right bottom：定义渐变形状为圆形，位置在元素右下角；
transparent 20px：从圆心开始，半径 20px 范围内完全透明（即“缺口”区域）；
red 20px：透明区域外（20px 半径以外）显示红色（元素底色）；
最终效果：元素右下角形成直径 40px 的透明圆形缺口。

二、完整弯曲框效果实现步骤

以“带白色边框的蓝色小盒子在红色大盒子内，形成弯曲连接效果”为例，分 4 步实现：

1. 步骤 1：创建基础 HTML 结构

仅需两层容器：外层大盒子（.box）与内层小盒子（.content）：

<div class="box">
    <div class="content"></div>
</div>

2. 步骤 2：添加基础样式（无缺口）

设置大、小盒子的尺寸、背景色与圆角，搭建基础视觉框架：

html, body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    width: 375px;
    height: 375px;
    border-radius: 12px;
    background-color: red; /* 大盒子底色 */
}
.content {
    width: 160px;
    height: 60px;
    border-radius: 12px;
    background-color: blue; /* 小盒子底色 */
}

3. 步骤 3：给小盒子加 outline 边框（关键优化）

用 outline 而非 border 给小盒子加白色边框，原因是 outline 不影响元素布局，且能更好配合后续渐变缺口：

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

.content { 
    /* 保留原有样式 */
    outline: 8px solid white; /* 白色边框，厚度 8px */
}

4. 步骤 4：叠加多径向渐变，创建弯曲缺口

通过两个径向渐变在大盒子上“挖”出与白色边框匹配的缺口，让小盒子与大盒子形成“弯曲连接”视觉效果：

.box {
    /* 保留原有尺寸、圆角样式 */
    background: 
        /* 第一个缺口：小盒子左侧与大盒子底部连接处 */
        -8px 60px / 20px 20px 
        radial-gradient(circle at right bottom, transparent 12px, white 12px),
        /* 第二个缺口：小盒子顶部与大盒子右侧连接处 */
        160px -8px / 20px 20px 
        radial-gradient(circle at right bottom, transparent 12px, white 12px),
        /* 大盒子底色（放在最后，避免被覆盖） */
        red;
    background-repeat: no-repeat; /* 禁止渐变重复，避免多余缺口 */
}

语法拆解：-8px 60px / 20px 20px 表示“缺口位置（x 轴 -8px，y 轴 60px）/ 渐变区域尺寸（宽 20px，高 20px）”；
关键要点：
1. 用负值偏移（如 -8px）让缺口“伸出”大盒子边界，匹配小盒子的 outline 边框；
2. 缺口的非透明色（white）需与页面背景色一致，确保视觉连贯；
3. 透明区域半径（12px）需与元素圆角（border-radius: 12px）匹配，避免尖角。

三、进阶优化：适配多方向与参数可控

实际项目中需支持不同方向的弯曲效果（如下角、左上角），且希望参数可灵活调整，可通过CSS 变量实现统一管理：

1. 多方向弯曲效果示例

通过调整径向渐变的位置与圆心方向，实现不同方向的缺口：

/* 右下角弯曲 */
.curved-bottom-right {
    background: 
        152px 68px / 20px 20px 
            radial-gradient(circle at left top, transparent 12px, white 12px),
        168px 52px / 20px 20px 
            radial-gradient(circle at left top, transparent 12px, white 12px),
        #4ecdc4; /* 自定义底色 */
    background-repeat: no-repeat;
}

/* 左下角弯曲 */
.curved-bottom-left {
    background: 
        -8px 52px / 20px 20px 
            radial-gradient(circle at right top, transparent 12px, white 12px),
        160px 68px / 20px 20px 
            radial-gradient(circle at right top, transparent 12px, white 12px),
        #45b7d1; /* 自定义底色 */
    background-repeat: no-repeat;
}

2. CSS 变量统一管理参数

将尺寸、边框厚度、圆角等关键参数定义为 CSS 变量，方便一键调整，减少重复代码：

.box {
    width: 300px;
    aspect-ratio: 1; /* 宽高比 1:1，保持圆形外观 */
    
    /* 定义 CSS 变量 */
    --w: 40px;          /* 内层小盒子宽度 */
    --h: 40px;          /* 内层小盒子高度 */
    --outline: 8px;     /* 小盒子 outline 边框厚度 */
    --radius: 12px;     /* 所有元素圆角大小 */
    --offset: calc(-1 * var(--outline));  /* 缺口负偏移量（伸出边界） */
    --size: calc(var(--radius) + var(--outline));  /* 渐变区域尺寸 */
    
    contain: layout; /* 性能优化：限制布局计算范围 */
    background: 
        /* 右上角缺口 */
        calc(100% - var(--offset)) calc(100% - var(--h))
            radial-gradient(
                circle at left top,
                transparent var(--radius),
                white var(--radius)
            ),
        /* 右下角缺口 */
        calc(100% - var(--w)) calc(100% - var(--offset))
            radial-gradient(
                circle at left top,
                transparent var(--radius),
                white var(--radius)
            ),
        /* 大盒子渐变底色（替代纯色） */
        linear-gradient(to top right, #1a1a1e 20%, #1a1a1e);
    
    background-repeat: no-repeat;
    background-size: var(--size) var(--size), var(--size) var(--size), cover;
    border-radius: var(--radius);
    align-content: end; /* 内层小盒子靠下对齐 */
}

.content {
    outline: var(--outline) solid white; /* 引用变量：边框厚度 */
    border-radius: var(--radius); /* 引用变量：圆角 */
    width: var(--w); /* 引用变量：宽度 */
    height: var(--h); /* 引用变量：高度 */
    text-align: center;
    line-height: var(--h); /* 文字垂直居中 */
    margin-left: auto; /* 小盒子靠右对齐 */
}

四、完整示例源码

整合上述优化，最终可直接复用的完整代码（含文字内容与交互效果）：

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        height: 100vh;
        margin: 0;
        display: grid;
        place-content: center;
        place-items: center;
        font: 14px "poppins";
        user-select: none; /* 禁止文字选中 */
    }
    .box {
        width: 300px;
        aspect-ratio: 1;
        /* CSS 变量 */
        --w: 40px;
        --h: 40px;
        --outline: 8px;
        --radius: 12px;
        --offset: calc(-1 * var(--outline));
        --size: calc(var(--radius) + var(--outline));
        
        contain: layout;
        background: 
            calc(100% - var(--offset)) calc(100% - var(--h))
                radial-gradient(circle at left top, transparent var(--radius), white var(--radius)),
            calc(100% - var(--w)) calc(100% - var(--offset))
                radial-gradient(circle at left top, transparent var(--radius), white var(--radius)),
            linear-gradient(to top right, #1a1a1e 20%, #1a1a1e);
        
        background-repeat: no-repeat;
        background-size: var(--size) var(--size), var(--size) var(--size), cover;
        border-radius: var(--radius);
        align-content: end;
    }
    .content {
        outline: var(--outline) solid white;
        border-radius: var(--radius);
        width: var(--w);
        height: var(--h);
        text-align: center;
        line-height: var(--h);
        margin-left: auto;
    }
    /* 文字区域样式 */
    section {
        width: 80%;
        position: absolute;
        top: 10px;
        left: 10px;
        color: #ffffff;
    }
    h1 {
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        padding-left: 28px;
    }
    ul, li {
        list-style: none;
        line-height: 24px;
    }
    /* 按钮交互样式 */
    button {
        all: unset; /* 清除默认按钮样式 */
        cursor: pointer;
        width: 100%;
        font-size: 1.2em;
        color: #fff;
        transition: all 0.2s; /*  hover 过渡效果 */
    }
    button:hover {
        background-color: #29282e; /*  hover 背景加深 */
    }
</style>
</head>
<body>
    <div class="box">
        <div class="content"><button>&#x1F517;</button></div>
        <section>
            <h1>唐多令・芦叶满汀洲<small><br />刘过</small></h1>
            <ul>
                <li>芦叶满汀洲，寒沙带浅流。</li>
                <li>二十年重过南楼。柳下系船犹未稳，能几日，又中秋。</li>
                <li>黄鹤断矶头，故人今在否？</li>
                <li>旧江山浑是新愁。</li>
                <li>欲买桂花同载酒，终不似，少年游。</li>
            </ul>
        </section>
    </div>
</body>
</html>

总结

该技巧的核心价值在于用纯 CSS 实现灵活的弯曲缺口效果，无需依赖外部资源（图片/SVG），优势如下：

免费在线工具导航

优网导航旗下整合全网优质免费、免注册的在线工具导航大全

灵活性高：通过调整径向渐变的位置、尺寸与 CSS 变量，可适配不同方向、不同尺寸的弯曲需求；
性能更优：避免额外资源加载，且 contain: layout 进一步优化布局计算；
易维护：CSS 变量统一管理参数，修改时无需逐行调整代码。

适用于卡片连接、特殊边框、交互组件等场景，是前端视觉优化的实用小技巧。

© 版权声明

文章版权归作者所有，未经允许请勿转载。

相关文章

分享3年接私活避坑流程+生产力工具实测

3

为啥现在前端没人热衷扒源码了？聊聊这两年的行业变化

2

手把手教你从零搭建 Vite 7 + React 19 + Tailwind CSS v4 企业级项目

1

Java 程序员必备的 17 款提效工具，少写代码、少改 Bug、少加班！

1

从单机到分布式：双MCP服务器负载架构深度解析

0

开发者每月躺赚1000+美元的7个被动收入玩法，亲测可行

3

暂无评论

暂无评论...