NB，radial-gradient 还能这么用。
Curved Box Cutouts in CSS
AI 摘要：本文介绍了一种 CSS 技巧，通过嵌套元素、轮廓（outline）和径向渐变（radial-gradient）的组合，模拟出带有弧形切角和间隙的视觉元素拼接效果，适用于卡片模块中的辅助内容或控件设计。
1. 基础布局
• 使用嵌套的 <div> 结构（.outer 和 .inner ），通过共享相同的 border-radius 值实现圆角一致性。
• 关键点：小盒子（.inner）需重叠在大盒子（.outer）上。
2. 小盒子设计
• 为 .inner 添加与页面背景同色的 outline，形成视觉间隙效果。
• 示例代码：outline: 8px solid white;。
3. 大盒子背景处理
• 使用两个 radial-gradient() 作为背景图像，定位在小盒子与大盒子重叠的角落。
• 计算逻辑：渐变尺寸 = 圆角半径（12px） + 轮廓宽度（8px）。
• 透明圆形部分匹配圆角半径，其余部分填充白色以模拟切角。
4. CSS 变量优化
• 将长度值（如圆角半径、轮廓宽度）转换为 CSS 变量（--r, --o 等），提升代码可维护性。
• 分离背景属性声明，增强可读性。
5. 四角定位扩展
• 通过调整 radial-gradient 的圆心位置（--cnr）和背景定位，支持小盒子在任意角落的布局。
• 示例：--cnr: right top; 配合动态计算的 background-position。
6. 应用场景与限制
• 适用场景：简单视觉分隔设计，无需额外 DOM 结构。
• 限制：无法实现阴影等需要真实切角的效果，仅影响背景层。
• 扩展用法：轮廓色可自定义（如 outline: var(--outline) solid navy;）。
author Preethi Sam
