每次用 clip-path 切了个形状才发现边框和阴影也跟着没了——今天这件事被 border-shape 彻底原生化了

小鹿·界面实验室 内容创作者 2026-09-03 11 阅读

每次给卡片切个圆角头像、写个对话气泡、加个斜切边，往往顺手就是一句 clip-path: polygon(...)，然后发现——边框没了，阴影也没了。圆角头像的描边断了，对话气泡的投影散在了一个矩形区域里。

Chrome 147（2026年4月）把这件事用 border-shape 彻底原生化了——同一个 shape() 语法，保留 border、box-shadow 和 outline，而不是把它们一起裁掉。

clip-path 一直在「多裁了」

clip-path 的工作机制是把整个元素（含所有装饰）全部裁进形状里，所以 border-radius 切掉的角、clip-path 切掉的区域，里面的 box-shadow 都会消失。这在你想给一个异形加边框时就踩坑了：要么放弃边框，要么用 box-shadow 的 filter: drop-shadow() 替代——但这样多阴影就没法玩了。

border-shape 换了思路：不是裁掉元素，而是重新定义元素边框的轮廓。边框、阴影、outline 全部跟着新轮廓走。

核心语法：clip-path 换名就能用

border-shape 接受的值和 clip-path 完全一样：

.card {
  border: 2px solid rgba(108, 132, 164, 0.24);
  box-shadow: 0 0 30px 10px rgba(65, 84, 116, 0.16);
  /* 替换这行 */
  border-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

对比 clip-path polygon（边框和阴影被裁掉）和 border-shape polygon（完整保留）效果差异明显，Chrome DevTools 里给 border 加个颜色能直接看到轮廓形状。

shape() 函数：SVG 路径进 CSS

Chrome 147 之后，border-shape 和 clip-path 都可以用 shape() 函数，用类似 SVG path 的命令画形状——hline、vline、arc、curve、line、close，直接在 CSS 里写：

.card {
  border-shape: shape(
    from 0 0,
    hline to calc(50% - 60px),
    arc to calc(50% + 60px) 0 of 50px 50px ccw,
    hline to 100%,
    vline to 100%,
    hline to 0%,
    close
  );
}

配合 CSS 变量还能做参数化设计，改一个变量就能更新整个形状。

双 shape 模式：cutout 和 breakout

border-shape 最有趣的能力是传两个值——填充模式（fill mode）：

/* 第一个 shape 是外边界，第二个是内边界 */
/* border 填在两个形状之间的区域 */
border-shape: inset(0) polygon(50% 0, 100% 100%, 0 100%);

把内 shape 推到元素外边界之外（inset(0 -100vw)），就得到一个 full-bleed breakout 效果——背景撑满整个视口，但元素本身还是矩形，内容不受影响。这用纯 CSS 就能实现，不需要任何 JS 或伪元素 hack。

三个坑

  1. Safari/Edge 之外暂无支持：目前只有 Chrome/Edge 支持，Firefox 和 Safari 还没实现。如果生产环境需要降级，用 @supports (border-shape: polygon(50% 0)) 检测，不支持时回退到 clip-path（损失装饰但保形状）。

  2. border-radius 被忽略：border-shape 激活时，border-radius 不再生效，元素不再有传统意义上的「角」，需要用 shape() 命令自己画出圆角。

  3. 内容仍走矩形流：元素内部内容仍然按照原始矩形排列，这点和 border-radius 的行为一致，不是 bug，设计时要注意内容溢出。

三步下一步

  1. Chrome 147+ 体验：打开 DevTools，在 Elements 面板里给一个 div 加上 border-shape，把 border 颜色调鲜艳一点，直接看效果。

  2. 审计项目里的 clip-path：搜索 clip-path 在哪里同时用了 border 或 box-shadow，那些场景就是 border-shape 的最佳候选。

  3. 加 @supports 渐进增强：给现有 clip-path 场景外层包一个 @supports (border-shape: polygon(50% 0))，不影响旧浏览器，逐步迁移。

评论区

0 条评论

登录后可评论。

小鹿·界面实验室 11 阅读