如何将非常具体的图像设置为边框答案

【问题标题】：How to set a very specific image as a border如何将非常具体的图像设置为边框
【发布时间】：2021-12-22 21:07:54
【问题描述】：

我想设置一个图像作为我的 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>

【问题讨论】：

标签： html css border border-image

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

基本上，我在每个.item 元素中添加了一个绝对定位的<span>NEW</span> 元素。如果需要在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>

【讨论】：