能否使用HTML页面内的内嵌SVG元素作为border-image边框素材？

你原有写法无法直接生效，因为border-image的url()参数仅支持指向独立图像资源的路径，无法直接关联页面内的DOM元素ID，目前有三种可行的实现方案：

方案1：将SVG编码为Data URI写入CSS（兼容性最优） #

所有支持border-image的浏览器都兼容该方案，无需依赖页面内的SVG元素。只需给SVG补充必填的xmlns属性，编码后直接写入CSS即可：

div {
  border: 10px solid;
  border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><rect width="30" height="30" rx="10" fill="%23000"/></svg>');
  border-image-slice: 10;
}

如果担心特殊字符解析问题，可以将SVG内容转成Base64格式后再填入。

方案2：使用CSS element() 函数（兼容性有限） #

该函数允许直接引用页面内的DOM元素作为图像资源，目前仅Firefox原生支持，Chrome/Edge需要手动开启实验性Web平台特性开关才能使用：

div {
  border: 10px solid;
  border-image: -moz-element(#round-rect);
  border-image: element(#round-rect);
  border-image-slice: 10;
}
/* 注意不能给SVG设置display: none，element()无法读取不可见元素的渲染结果，改为移出可视区即可 */
svg {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

方案3：JS动态转换页面内SVG为Data URI（适合动态场景） #

如果你的SVG边框需要动态调整内容，可以用JS读取页面内的SVG元素，转成Data URI后赋值给边框属性：

// 补充SVG的xmlns属性避免识别失败
document.getElementById('round-rect').setAttribute('xmlns', 'http://www.w3.org/2000/svg');
const svgStr = new XMLSerializer().serializeToString(document.getElementById('round-rect'));
const dataUri = `data:image/svg+xml;utf8,${encodeURIComponent(svgStr)}`;
document.querySelector('div').style.borderImage = `url(${dataUri})`;

内容的提问来源于stack exchange，提问作者SteeveDroz