使用圆形图像作为边框图像答案

【问题标题】：Using a round image as as border image使用圆形图像作为边框图像
【发布时间】：2021-08-28 22:23:26
【问题描述】：

好的，所以我想使用圆形图像作为边框图像来覆盖图像的整个外部。您可以在下面看到两个图像，其中一个是矩形，另一个是圆形。我能够弄清楚如何使用矩形图像来完美地拟合给定的图像，但现在我正在尝试使用相同的技术来拟合圆形图像作为边框，但我无法找到一种方法来实现这一点技术。所以目前对于矩形图像，这些样式正在被使用：

.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。有没有更简单更好的方法来做到这一点？任何帮助表示赞赏。

【问题讨论】：

标签： html css border border-image

【解决方案1】：

嗯……这个怎么样？

我认为这不是完美的解决方案，但效果很好。

我使用了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>

【讨论】：

似乎可以工作，但如果我想让边框图像有更多的厚度，我是否必须增加填充？
@Ashok 是的，你可以通过改变 padding 来调整边框的粗细。
是的，但它搞砸了。边框和图像之间的距离似乎增加了，在中间形成了一个间隙。我不认为这种方法是非常模块化的，因为我想增加边框宽度而不必增加高度和宽度。
@Ashok 如何使用box-sizing: border-box 样式来框定元素？
这样做之后，我们就失去了对图像宽度的控制。填充只是增加了边框和图像之间的间隙。

【解决方案2】：

您可以简单地执行以下操作。透明边框和你的框架作为背景：

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

【讨论】：

你是怎么得出这个 22px 的数字的？这适用于一种特定的实现，但是当我必须在多种尺寸的图像上使用框架时，对于那些框架似乎并不总是适合图像。我的形状并不总是圆形的，也可以是椭圆形的，它看起来不适合那里
@Ashok 检查更新。我使用的数字取决于您的框架和图像的大小。我怀疑是否有通用解决方案
新的实现似乎有效，我可能需要根据我的需要对其进行一些调整。我希望框架宽度增加和减少。当我现在这样做时，图像和框架之间的空间似乎会增加和减少，背景属性中是否还有其他参数可以做到这一点？感谢您的帮助