by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12232
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
一句话，border-shape是用来实现不规则边框效果的。
一、这次不妨从案例入手
首先，我们使用AI生成一个五角星的勾勒路径。
帮我生成一个 五角星 SVG，使用 <path> 路径
使用模型Claude-Opus-4.6，总token 20,117，费用0.18元。
结果返回：
这是一个使用 <path> 绘制的五角星 SVG：
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<path d="M50 5 L61.8 38.2 L97.6 38.2 L68.9 59.5 L79.4 93.5 L50 73 L20.6 93.5 L31.1 59.5 L2.4 38.2 L38.2 38.2 Z" fill="#f5a623" stroke="#d4880f" stroke-width="1"/>
</svg>或者使用更精确的数学计算版本（基于圆心 50,50，外径 45，内径 18）：
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<path d="M50 5 L59.05 35.36 L91.27 35.36 L64.61 54.64 L73.66 84.99 L50 67.5 L26.34 84.99 L35.39 54.64 L8.73 35.36 L40.95 35.36 Z" fill="#f5a623" stroke="#d4880f" stroke-width="1"/>
</svg>虽然border-shape属性支持path()函数，但是path()函数的绘制结果尺寸是固定的，适用场景受限，我们需要转换成更实用的shape()函数。
之前我在介绍“CSS小图标剪裁终极解决方案clip-path shape()函数”一文的时候，展示过一个工具，可以将path路径转为shape()函数语法。
您可以狠狠地点击这里： path() to shape()函数转换工具
这里我们只需要第一个简约版的路径就可以了，粘贴到第一个输入框，点击转换按钮，我们就可以得到shape()函数参数值了。
此时，我们就可以得到可以任意设置边框的五角星效果啦，HTML和CSS代码如下所示：
<style>
.star {
width: 150px;
aspect-ratio: 1.076;
border: dashed red;
border-shape: shape(from 50% 0%,line to 62.39% 37.51%,line to 100% 37.51%,line to 69.85% 61.58%,line to 80.88% 100%,line to 50% 76.84%,line to 19.12% 100%,line to 30.15% 61.58%,line to 0% 37.51%,line to 37.61% 37.51%,close);
box-shadow: 2px 2px 4px #0008;
background: lightyellow;
}
</style>
<canvas class="star"></canvas>此时，便可以得到如下截图所示的渲染效果：
通过上述效果我们可以得到以下结论：
- 设置了
border-shape之后，border-style无效，边框类型永远是实线。 - 应用了边框形状之后，
box-shadow、outline、border-image等属性的轮廓计算区域也会跟着变化。
二、border-shape语法
border-shape的语法和clip-path是一样的，支持常规图像函数、shape()函数和path()函数。
例如：
border-shape: inset(22% 12% 15px 35px);
border-shape: circle(6rem at 12rem 8rem);
border-shape: ellipse(115px 55px at 50% 40%);
border-shape: polygon(
50% 2.4%,
34.5% 33.8%,
0% 38.8%,
25% 63.1%,
19.1% 97.6%,
50% 81.3%,
80.9% 97.6%,
75% 63.1%,
100% 38.8%,
65.5% 33.8%
);
border-shape: shape(...);
border-shape: path(...);由于border-radius属性很好用，所以，border-shape属性的inset()、circle()和ellipse()基本上就没有出场的机会，大家可以把目光放在polygon()和shape()这两个函数上。
例如：
<style>
.star {
width: 150px;
aspect-ratio: 1;
border: dotted red;
border-shape: polygon(
50% 2.4%,
34.5% 33.8%,
0% 38.8%,
25% 63.1%,
19.1% 97.6%,
50% 81.3%,
80.9% 97.6%,
75% 63.1%,
100% 38.8%,
65.5% 33.8%
);
box-shadow: 2px 2px 4px #0008;
background: lightyellow;
}
</style>
<canvas class="star"></canvas>也可以得到如下图所示的五角星效果。
三、兼容性以及其他说明
border-shape是一个相当新的CSS属性，目前只有Chrome 147+浏览器支持。
对于不支持的浏览器，可以试试使用 clip-path + drop-shadow()滤镜近似模拟。
然后，这里有个codepen案例，演示了使用border-shape实现标签式导航条的效果，有兴趣的可以了解下。
碎碎念时间
对于复杂需求，超出自身能力边界的项目，还是不能全部交给AI。
这是最近团队出现的一个案例，极为复杂的需求，全AI生成，一周就用完所有预订token额度，功能也上线了，看起来还不错。
但随着后续需求增加，bug反馈也过来，其维护的成本惊人的增加。
由于代码都是AI生成的，开发者其实已经难以理解其中的实现细节，导致后续的token消耗相当惊人。
长远来看，是否提效了，是否节约成本了，还真难说。
我觉得，还是需要自己的思考的，平时对于技术还是要不断积累的，新的复杂需求上马，还是要技术预研的，整体的实现脉络还是要自己掌控的。
当然，如果是让AI实现自己根本实现不了的东西，那就另说，那就不是成本的问题，是有和无的区别了。
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12232
（本篇完）