我刚刚看到了 Max Bittker 的这个很酷的小网站：broider。 您可以在一个 9 格网格上设计图像（中间部分除外），它将为您生成一个图像，供您与 border-image 一起使用，以及可复制粘贴的 CSS。
查看我的小设计
图像的区域最终输出到一个包含每个区域设计的 base64 PNG 文件中。 例如，如果您只在左上角象限中绘制，则生成的 PNG 如下所示
这为您提供了这样的单边框，这可能正是您想要的
在新的 ShopTalk Show 网站 上，我们在一些地方有类似的效果，例如这样
我们以稍微不同的方式做到了这一点。 而不是 border-image，我们使用了 background-image 和 background-repeat: round; 这样我们就可以以几乎相同的方式使用图像，只是我们必须额外执行一个步骤来放置一个“内部”元素以消除中间部分（因此它伪造了一个边框）。
像这样
现在看来，我们可能应该只使用 border-image，因为它可以做同样的事情，而且更简洁。 我们的年鉴页面 有更多示例。