做过异形边框的，今天 CSS 自己会画了——border-shape 把那套切图 div 全删了

做过异形边框的，今天 CSS 自己会画了——border-shape 把那套切图 div 全删了

以前要做个圆角卡片、聊天气泡或者异形标签，用 CSS 只能靠切图加一层 div 叠上去。border-radius 只能处理圆角，真正的多边形、斜边、缺口都要靠背景图或者 SVG。这套方案用了十几年，前端圈没人觉得有问题——直到 Chrome 149 把 border-shape 放进了 Baseline。

border-shape 是什么

border-shape 是 CSS Backgrounds and Borders Module Level 5 里的新属性，直接在 CSS 里写多边形路径，不再需要切图 div。它和 border-radius 是两个维度的东西：border-radius 处理圆角曲线，border-shape 处理任意多边形轮廓。

基本用法很简单：

“`css
/ 浏览器原生多边形边框 /
.card {
border-shape: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
“`

跑出来的效果就是一个菱形，纯 CSS，零图片。

它还支持 outline 配合用，做外描边：

“`css
.badge {
background: #6366f1;
border-shape: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
outline: 3px solid #818cf8;
outline-offset: 4px;
}
“`

这样就能做一个斜角徽章，带外发光，div 叠 div 的时代彻底过了。

border-shape vs 传统切图方案

以前的异形边框要靠两件事之一：要么切一张透明背景的多边形图贴上去，要么用 clip-path 把一个 div 裁成形状再用另一个 div 做背景。两套方案都有一个共同问题：背景色和内容是分离的，一旦要改主题色，两边都要动。

border-shape 的本质区别在于：它作用在元素的 border 区域本身，不是裁剪，是画轮廓。背景色直接填在 shape 里面，outline 直接在 shape 外面。颜色改动只需要动一个属性。

border-outline 的配合

border-shape 还有一个搭档 border-outline，做异形外描边特别顺。以前要给一个斜角按钮加外发光边框，要先画 shape，再用 outline 配合 box-shadow 硬凑。现在一行 border-outline 搞定：

“`css
.btn {
background: linear-gradient(135deg, #f59e0b, #d97706);
border-shape: polygon(8px 0%, 100% 0%, calc(100% – 8px) 100%, 0% 100%);
border-outline: 2px solid rgba(245, 158, 11, 0.4);
}
“`

outline-offset 在 border-shape 上工作方式和普通元素一致，可以控制描边和 shape 之间的间距。

浏览器支持情况

Chrome 149 首发，Edge 149 同步，Safari 暂时没有。Firefox 在跟进中。这个功能目前全球覆盖约 60%，移动端 Chrome Android 149+ 可用。生产环境要配渐进增强：

“`css
/ 先写通用方案 /
.card {
border-radius: 12px;
}

/ 支持 border-shape 的浏览器用原生多边形 /
@supports (border-shape: polygon(50% 0%)) {
.card {
border-radius: 0;
border-shape: polygon(20px 0%, calc(100% – 20px) 0%, 100% 20px, 100% calc(100% – 20px), calc(100% – 20px) 100%, 20px 100%, 0% calc(100% – 20px), 0% 20px);
}
}
“`

什么时候用它

border-shape 适合这几类场景：异形标签和徽章、聊天气泡和消息框、仪表盘的数据卡片、运营活动的多边形按钮。如果只是普通圆角卡片，border-radius 够用，不用强行换。

Chrome 149 给了前端工程师一件以前只能靠设计工具才能做到的事：直接在 CSS 里画任意多边形轮廓。这不是 CSS 变强了一点，是把设计资产变成代码的能力往前跨了一大步。