有没有一种方法可以确保 100% 忠实地再现 CSS 或 SVG 中的边框图像？

Question

这是我的演示：https://codepen.io/joondoe/pen/MWwmGwG?editors=0100

在我的示例中，我使用的是 CSS，但我也愿意接受使用 SVG 的解决方案。

我成功地创建了一个内部填充内容的边框图像。现在我想知道是否可以创建 100% 平滑的边框图像？我的意思是，一个边框图像可以以编程方式自动重现原始边框图像或最接近的边框图像。

在我的演示中，您可以看到它还不错，但相对于原始边框图像仍然存在一些锯齿和滞后。这里是原始边框图片：

这是我的代码：

.container {
  background-color: #444;
  width: 300px;
  height: 350px;
  padding: 20;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid ;
  border-width:15px 30px 30px 25px;
  border-image:url( https://i.imgur.com/Z6TVgss.png)40 stretch;
 overflow:hidden;
 box-sizing:content-box; background:url(https://www.ecopetit.cat/wpic/mpic/6-67359_race-car.jpg) center/cover no-repeat content-box;
  
}

div.element {
  width: 50px;
  height: 50px; 
  mask-image: url( https://i.imgur.com/Z6TVgss.png);
  
};

div.icon-image {
  mask-size: 100% 100%;
  mask-position: 0% 0%;
  mask-repeat: no-repeat;
  display: flex;
  /* border: 1px solid orange; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
 
}

div.icon-image img {
  width: 100%; 
}

<div class="container">
  <div title="" class="icon-image element"></div>
</div>

有没有办法仅使用 CSS 或 SVG 百分比中的编程功能来重现原始边框的图像，填充属性和全部？

编辑： 感谢 Termani Afif 提供此解决方案。 我很惊讶在 Termani Afif 的回答中图像上有一个像素的间隙，所以我假设我的边界图像和蒙版可能不是这样说的。所以我用其他图像重新组合，效果很好，这里是演示：codepen.io/joondoe/pen/GRJmBQK?editors=0100

Answer 1

这是一个带面具的想法。诀窍是有两个图像。您的初始图像将包含边框和图像¹，如下所示：

上面的图像将用于遮罩区域，另一个图像的伪元素将位于顶部以创建边框：

.box {
  width:500px;
  height:300px;
  background:url(https://www.ecopetit.cat/wpic/mpic/6-67359_race-car.jpg) center/cover;
  -webkit-mask:url(https://i.ibb.co/D1X8D2J/ZHD6p.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/D1X8D2J/ZHD6p.png) center/contain no-repeat;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(https://i.stack.imgur.com/ZHD6p.png) center/contain no-repeat;
}


body {
  background:pink;
}

<div class="box"></div>

¹ 我没有关注图像质量。这是对初始图像的快速编辑，使内部区域不透明。这个想法是有边框图像（内部透明）和填充图像（内部不透明）

Answer 2

Svg 解决方案：
SVG蒙版用于将图像切割成框架形状。

为了准确地重复框架的形状，我使用了矢量编辑器：

SVG蒙版用于将图像切割成框架形状。

该应用程序响应迅速，适用于所有现代浏览器，包括 MS Edge

<style>
.container {

width:90vw;
height:90vh;
background:skyblue;
}

.ram {
fill:none;
stroke-width:25;
stroke:black;
}
</style> 
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1920 1125" >

<defs>
  <mask id="msk1" >  
          <!-- Border obtained using the vector editor -->
     <path id="mask_ram" fill="white" stroke-width="25" stroke="white" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />
    
  </mask>
</defs>
    <!-- An SVG mask is used to cut the image into a frame shape.  -->
 <image mask="url(#msk1)" xlink:href="https://i.stack.imgur.com/S7iXP.jpg" height="100%" width="100%" />

     <!-- Border on top of the mask. -->
  <path class="ram" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />  
</svg>
</div>

更新

解决SVG时，以后可以轻松改变边框的外观：

通过应用过滤器

<style>
.container {

width:90vw;
height:90vh;
background:skyblue;
}

.ram {
fill:none;
stroke-width:30;
stroke:black;
filter: url(#displacementFilter);
}
</style> 
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1920 1125" >

<defs>
  <mask id="msk1" >  
          <!-- Border obtained using the vector editor -->
     <path id="mask_ram" fill="white" stroke-width="25" stroke="white" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />
    
  </mask>  
    <filter id="displacementFilter">
     <feTurbulence type="turbulence" baseFrequency="0.05 0.05"
        numOctaves="3" result="turbulence" seed="10"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="10" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
  </filter>    
</defs>
    <!-- An SVG mask is used to cut the image into a frame shape.  -->
 <image mask="url(#msk1)" xlink:href="https://i.stack.imgur.com/S7iXP.jpg" height="100%" width="100%" />

     <!-- Border on top of the mask. -->
  <path  class="ram" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />  
</svg>
</div>

Select 任何边框颜色只需更改一个参数 fill =" purple "

<style>
.container {

width:90vw;
height:90vh;
background:skyblue;
}

.ram {
fill:none;
stroke-width:30;
stroke:purple;
filter: url(#displacementFilter);
}
</style> 
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1920 1125" >

<defs>
  <mask id="msk1" >  
          <!-- Border obtained using the vector editor -->
     <path id="mask_ram" fill="white" stroke-width="25" stroke="white" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />
    
  </mask>   
           
    <filter id="displacementFilter">
 
    <feTurbulence type="turbulence" baseFrequency="0.05 0.05"
        numOctaves="3" result="turbulence" seed="10"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="8" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
  </filter>    
</defs>
    <!-- An SVG mask is used to cut the image into a frame shape.  -->
 <image mask="url(#msk1)" xlink:href="https://i.stack.imgur.com/S7iXP.jpg" height="100%" width="100%" />

     <!-- Border on top of the mask. -->
  <path  class="ram" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />  
</svg>
</div>

如果您愿意，您甚至可以为边框设置动画：

悬停时边框动画开始

.container {

width:90vw;
height:90vh;
background:skyblue;
}

.ram {
fill:none;
stroke-width:30;
stroke:black;
filter: url(#displacementFilter);
}

<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1920 1125" >

<defs>
  <mask id="msk1" >  
          <!-- Border obtained using the vector editor -->
     <path id="mask_ram" fill="white" stroke-width="25" stroke="white" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />
    
  </mask>  
    <filter id="displacementFilter">
    <feTurbulence type="turbulence" baseFrequency="0.05"
        numOctaves="5" result="turbulence" seed="10">
     <!--Border animation -->
    <animate
      attributeName="baseFrequency"
      dur="100s"
      values="0.05;0.001;0.05"
      repeatCount="1"
      begin="img1.mouseover"
      end="img1.mouseout" />
 </feTurbulence> 
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="15" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
  </filter>    
</defs>
    <!-- An SVG mask is used to cut the image into a frame shape.  -->
 <image id="img1" mask="url(#msk1)" xlink:href="https://i.stack.imgur.com/S7iXP.jpg" height="100%" width="100%" />

     <!-- Border on top of the mask. -->
  <path  class="ram" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />  
</svg>
</div>

有没有一种方法可以确保 100% 忠实地再现 CSS 或 SVG 中的边框图像？

Is there a method to ensure 100% faithful reproduction of a border-image in CSS or SVG?

html

css

svg

css-mask