4

这是我的演示：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 的 anwser 中的图像上有一个像素的间隙，所以我假设我的边界图像和蒙版可能不是这样说的。所以我用其他图像重新组合，效果很好，这里是演示：codepen.io/joondoe/pen/GRJmBQK?editors=0100

4

2 回答 2

3

这是一个带面具的想法。诀窍是有两个图像。您的初始图像将包含边框和图像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>

带边框的 CSS 蒙版图像

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

于 2020-02-28T10:46:01.510 回答
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 的时候，以后可以很方便的改变边框的外观：

  1. 通过应用过滤器 

<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>

  1. 只需更改一个参数即可选择任何边框颜色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>

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

悬停时开始边框动画

.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>

于 2020-02-28T13:13:40.863 回答