问题描述
好的，所以我想使用圆形图像作为边框图像来覆盖图像的整个外部。您可以在下面看到两张图片，其中一张是矩形，另一张是圆形。我能够弄清楚如何使用矩形图像来完美地适合给定的图像，但现在我正在尝试使用相同的技术将圆形图像作为边框来拟合，但我找不到一种方法来实现这一点技术。因此，目前正在使用这些 stlyes 用于矩形图像：
.frame{
height: 192px;
width: 160px;
border-width: 30.4px 32px;
border-image: url("/images/frame-4.png") 100 / 1.6 / 0 stretch;
}
现在使用圆形图像作为边框并将图像放置在里面，我在框架类上使用边框半径。
.frame{
border-radius: 111px;
height: 192px;
width: 160px;
border-color: red;
border-width: 16px;
background: blue;
/* border-image: url("/images/frame-5.png") 100 / 1 / 0 stretch; */
}
当我使用边框颜色时，一切看起来都很好
但是当我打开边框图像时，事情开始分崩离析
我不确定发生了什么以及如何解决这个问题。 https://i.imgur.com/erDQcs5.png 如果有人想试一试，这里是图片链接。由于我希望边框图像完美地包裹图像，因此我认为边框图像是最好的方法，而不是使用多个 div。有没有更简单更好的方法来做到这一点？任何帮助表示赞赏。
解决方法
您可以简单地执行以下操作。透明边框和您的框架作为背景：
img {
border-radius:50%;
border:19px solid transparent;
background:url(https://i.imgur.com/erDQcs5.png) center/100% 100% border-box;
}<img src="https://picsum.photos/id/1/200/200" >
<img src="https://picsum.photos/id/1/200/150" >
<img src="https://picsum.photos/id/1/150/200" >嗯……这个怎么样？
我认为这不是完美的解决方案，但效果很好。
我使用了 background-image 和 padding 而不是 border-image。
在子元素（内容）中，我使用了 border-radius: inherit。
如果您需要测试示例代码，请为图片输入正确的网址。
.border-image {
border-radius: 111px;
height: 192px;
width: 160px;
background-image: url("frame");
background-size: 100% 100%;
padding: 20px;
}
.contents {
width: 100%;
height: 100%;
border-radius: inherit;
background-image: url("url");
background-repeat: no-repeat;
background-size: cover;
}<body>
<div class="border-image">
<div class="contents"></div>
</div>
</body>