CSS条件圆角技巧：让元素贴边时自动变直角

元素在视口中悬浮时保持圆角，一旦贴到屏幕边缘就自动变成直角——这个效果用纯 CSS 就能实现，不需要 JavaScript 监听 resize 事件。来自 YouTube 的一则前端技巧演示展示了一套基于 clamp() 和视口单位的条件圆角方案，逻辑简洁但细节值得拆解。

从百分比圆角说起：为什么它不够用

最直接的思路是给 border-radius 设一个百分比值，比如 20%。百分比圆角会随元素尺寸缩放，元素变窄时圆角也跟着变小，看起来像是"自适应"了。但问题在于，百分比圆角同时受元素宽度和高度影响，宽高比不一致时会产生奇怪的椭圆角，尺寸变化也完全不受控。

演示中提到，百分比方案"leads to strange sizes"——它能缩放，但缩放的方式和你想让圆角在贴边时归零的目标并不一致。

border-radius 使用百分比时，水平方向的半径按元素宽度的百分比计算，垂直方向的半径按元素高度的百分比计算。也就是说，border-radius: 20% 等价于 border-radius: 20% / 20%，两个方向的基准不同。当元素宽高比不是 1:1 时，两个方向的绝对半径不相等，圆角就会呈现椭圆弧而非正圆弧。即便元素是正方形，百分比圆角也会始终占据元素边长的固定比例，无法在元素变宽时保持一个恒定的视觉圆角尺寸，更无法实现「贴边时归零」这种与位置相关的条件逻辑。

核心公式：100vw 减去 100%

真正的突破口是用视口宽度减去元素宽度：

border-radius: calc(100vw - 100%);

这个表达式的含义很直观：当元素宽度接近视口宽度时，差值趋近于 0，圆角消失；元素越窄，差值越大，圆角越明显。元素贴住屏幕两侧时圆角自然归零，悬浮在中间时保持圆润。

把浏览器窗口慢慢拉宽拉窄，可以看到圆角连续地变大变小，直到元素触边那一刻降到零。方向是对的，但过渡区间太"软"——圆角是在一段距离内逐渐缩小的，而不是干脆地切换。

用 clamp 加指数消除过渡带

要让圆角"咔哒"一声切换，需要把这段软过渡压扁。做法是把这个差值塞进 clamp()：

border-radius: clamp(0px, (100vw - 100%) * 9999, 24px);

中间那个值乘以一个极大的系数（演示里用的是指数形式，作者也说明 * 9999 效果完全相同），让差值在离开边缘的瞬间就冲到上限，于是圆角几乎是在触边/离边的临界点上瞬间开启或关闭，中间不再有模糊的渐变区间。

clamp() 的三个参数分别锁定了最小圆角（0）、动态计算值、最大圆角（你想要的圆角上限）。这个结构保证了无论怎么缩放，圆角都不会超出设计范围。

滚动条带来的偏移问题

视口单位有一个经典陷阱：100vw 包含滚动条占用的宽度。在部分操作系统上，滚动条会覆盖在内容之上，导致圆角归零的临界点比视觉上的边缘提前一点，看起来像是"钻到滚动条下面"才切换。

作者给出的缓解方案是 scrollbar-gutter: stable，让浏览器为滚动条预留固定空间，使 vw 的计算与实际可视区域对齐。需要提醒的是，这个属性并非所有浏览器都完整支持，作者本人也强调要实际测试。在 Chrome 上配合 scrollbar-gutter: stable 使用时，切换点能落在预期位置。

scrollbar-gutter: stable 是 CSS Overflow 模块中用于控制滚动条槽位的属性。默认情况下，当页面内容不足一屏时滚动条不出现，内容变长后滚动条突然出现并挤压布局，造成内容横向跳动（layout shift）。stable 值让浏览器始终为滚动条预留空间，即使当前不需要滚动条，槽位也保持存在，从而避免布局抖动。对本例而言，预留槽位后 100vw 与实际内容区宽度的差值不再包含滚动条宽度，圆角归零的临界点能准确落在可视边缘。此外还有 stable both-edges 取值，同时在两侧预留对称空间，适合居中布局的场景。

容器查询单位：不只针对视口

如果元素不是铺满视口，而是放在某个容器里（比如卡片列表中的每一项），用 vw 就会出错——圆角会一直保持到元素碰到视口边缘才切换，而不是碰到容器边缘。

解决办法是给父级声明 container-type，然后把公式里的 vw 换成容器查询单位 cqi（逻辑方向的容器内联尺寸单位，cqw 在多数场景下等价）。这样圆角的开关临界点就跟随容器边界走，元素贴到容器边缘时圆角归零。

.parent { container-type: inline-size; }
.child {
  border-radius: clamp(0px, (100cqi - 100%) * 9999, 24px);
}

没有定义容器时，cqi 会回退到视口尺寸，所以同一段代码在两种场景下都能工作，不需要写两套规则。

container-type 是容器查询的基础声明，常见取值有 inline-size、size 和 normal。inline-size 表示元素在行内方向（水平书写模式下即宽度）上成为可查询的容器，子元素可以使用 cqw（容器宽度的 1%）、cqi（容器内联尺寸的 1%）、cqmin/cqmax 等单位；size 则同时建立行内和块级两个方向的尺寸 containment，开销更大但支持 cqh、cqb 等块级单位。需要注意，声明 container-type 会为该元素建立 containment 上下文，可能影响其自身尺寸的计算方式，因此通常加在明确尺寸的父级包装元素上，而非直接加在需要自适应内容的元素上。

这套方案的实际价值

条件圆角的典型用武之地是移动端全宽卡片、弹窗、以及"小屏时铺满、大屏时留白"的自适应布局。传统做法要么用媒体查询在断点处硬切，要么用 JS 测量元素宽度动态改样式；前者在断点附近会有跳变，后者增加运行时开销。

用 clamp() 配合视口/容器单位把判断逻辑交给 CSS 引擎，代码只有一行，且随窗口缩放连续响应。代价是需要理解单位语义和滚动条行为，并针对目标浏览器做验证。对于追求"少一层 JS"的界面细节，这个技巧值得收进工具箱。