Html 是否有一种方法可以确保在CSS或SVG中100%忠实地再现边框图像？
这里是我的演示： 在我的示例中，我使用CSS，但我也对使用SVG的解决方案持开放态度 我已经设法创建了一个内部填充内容的边框图像。现在我想知道是否有可能创建一个100%平滑的边界图像？我的意思是，自动复制原始边界图像的边界图像，或者以编程方式复制最近的边界图像 在我的演示中，你可以看到它非常好，但是仍然有一些锯齿和相对于原始边框图像的滞后。 此处显示原始边框图像： 这是我的代码：Html 是否有一种方法可以确保在CSS或SVG中100%忠实地再现边框图像？,html,css,svg,css-mask,Html,Css,Svg,Css Mask,这里是我的演示： 在我的示例中，我使用CSS，但我也对使用SVG的解决方案持开放态度 我已经设法创建了一个内部填充内容的边框图像。现在我想知道是否有可能创建一个100%平滑的边界图像？我的意思是，自动复制原始边界图像的边界图像，或者以编程方式复制最近的边界图像 在我的演示中，你可以看到它非常好，但是仍然有一些锯齿和相对于原始边框图像的滞后。 此处显示原始边框图像： 这是我的代码： .container{ 背景色：#444； 宽度：300px； 高度：350px； 填充：20； 保证金：0；
.container{
背景色：#444；
宽度：300px；
高度：350px；
填充：20；
保证金：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
边框：实心；
边框宽度：15px 30px 30px 25px；
边框图像：url（https://i.imgur.com/Z6TVgss.png)拉伸40次；
溢出：隐藏；
框大小：内容框；背景：url(https://www.ecopetit.cat/wpic/mpic/6-67359_race-car.jpg)居中/覆盖无重复内容框；
}
分区元素{
宽度：50px；
高度：50px；
掩码图像：url（https://i.imgur.com/Z6TVgss.png);
};
分区图标图像{
面罩尺寸：100%100%；
面罩位置：0%0%；
面罩重复：不重复；
显示器：flex；
/*边框：1px实心橙色*/
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
div.icon-image img{
宽度：100%；
}这里有一个关于面具的想法。诀窍是有两个图像。您的初始图像将包含边框和图像1，如下所示： 上面的图像将用于遮罩该区域，顶部将有一个伪元素和另一个图像，以创建边界：
.box{
宽度：500px；
高度：300px；
背景：url(https://www.ecopetit.cat/wpic/mpic/6-67359_race-car.jpg)中心/盖；
-webkit掩码：url(https://i.ibb.co/D1X8D2J/ZHD6p.png)居中/不包含重复；
掩码：url(https://i.ibb.co/D1X8D2J/ZHD6p.png)居中/不包含重复；
位置：相对位置；
}
.盒子：以前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：url(https://i.stack.imgur.com/ZHD6p.png)居中/不包含重复；
}
身体{
背景：粉红色；
}SVG掩码用于将图像切割成框架形状 为了准确地重复帧的形状，我使用了向量编辑器： SVG掩码用于将图像切割成框架形状 该应用程序响应迅速，适用于所有现代浏览器，包括
MS-Edge
.集装箱{
宽度：90vw；
高度：90vh；
背景：天蓝色；
}
拉姆先生{
填充：无；
笔画宽度：25；
笔画：黑色；
}