html - 如何将非常具体的图像设置为边框

Question

我想将图像设置为我的 div 的边框

主要规则是：边框应该在盒子外面，而不是增加盒子的大小。另请注意，div 的（项目）具有相同的宽度，但不同的高度。

我想看到的结果：https ://dc579.4shared.com/img/JjmymoBWiq/s23/17d090e2630/result

边框图片：https ://dc614.4shared.com/img/2uaeGtwfea/s23/17d090b76b0/border-1

.container {
  display: flex;
  justify-content: space-around;
}

.product1 {
  width: 200px;
  height: 500px;
  background-color: blue;
}
.product2 {
  width: 200px;
  height: 550px;
  background-color: green;
}
.product3 {
  width: 200px;
  height: 520px;
  background-color: red;
}
.item {
  border: 20px;
  border-image: url("https://dc614.4shared.com/img/2uaeGtwfea/s23/17d090b76b0/border-1")
}

<div class="container">

<div class="product1 item">
123
</div>
<div class="product2 item">
123
</div>
<div class="product3 item">
123
</div>

</div>

Answer 1

我认为您还必须指定颜色和模式：

.item{
    border: 20px solid #555;
    ...
}

可能行不通，我不是网络开发人员，但玩过它，这可能会解决它

Answer 2

在这种情况下，边框图像可能不适合您。我创建了一种替代方法来实现您想要的外观。

本质上，我<span>NEW</span>在每个元素内添加了一个具有绝对定位的.item元素。如果需要在 span 周围移动，修改 top 和 right css 属性。

.container {
    display: flex;
    justify-content: space-around;
 }

.product1 {
    width: 200px;
    height: 500px;
    background-color: blue;
 }
 .product2 {
     width: 200px;
     height: 550px;
     background-color: green;
 }
 .product3 {
     width: 200px;
     height: 520px;
     background-color: red;
 }
 .item {
    border: 10px solid rgb(255, 107, 107);
    position: relative;
 }
 .item span {
    position: absolute;
    top: -20px;
    right: -25px;
    background-color: red;
    padding: 5px;
    border-radius: 5px;
    color: white;
    z-index: 10;
 }

<div class="container">
  <div class="product1 item">
     <span>NEW</span>
     123
  </div>
  <div class="product2 item">
     <span>NEW</span>
     123
  </div>
  <div class="product3 item">
     <span>NEW</span>
     123
  </div>
 </div>