我想將影像設定為我的 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>uj5u.com熱心網友回復：
我認為您還必須指定顏色和模式：
.item{
border: 20px solid #555;
...
}
可能行不通，我不是網路開發人員，但玩過它，這可能會解決它
uj5u.com熱心網友回復：
在這種情況下，邊框影像可能不適合您。我創建了一種替代方法來實作您想要的外觀。
本質上，我<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/355100.html
下一篇：如何讓我的文本更接近我的標題？