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>

此时，便可以得到如下截图所示的渲染效果：

通过上述效果我们可以得到以下结论：

1. 设置了border-shape之后，border-style无效，边框类型永远是实线。
2. 应用了边框形状之后，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

（本篇完）