html - 如何正确地将图像设置为边框

Question

我是 HTML 和 CSS 的新手，我的任务是将已经准备好的图像设置为边框。

我做错了什么？

div {
  width: 240px;
  height: 510px;
  background-color: lightblue;
  border-image: url(https://i.ibb.co/TqBJP5d/border-1.png) stretch;
}

<div>
    123
</div>

Answer 1

更多信息在这里

使用您的代码的工作示例：

   .bordered-box {
  width: 140px;
  height: 510px;
  background-color: lightblue;
  border: 34px solid transparent;
  border-image: url(https://i.ibb.co/TqBJP5d/border-1.png) stretch 38;
  border-image-outset: 18px 19px 10px 12px;
  margin: 40px;
}

<div>
  <div class="bordered-box">
    123
  </div>
</div>

Answer 2

在您的 div 上添加具有透明度的边框宽度。

div {
  width: 240px;
  height: 510px;
  background-color: lightblue;
  border: 39px solid transparent;
  border-image: url(https://i.ibb.co/TqBJP5d/border-1.png) stretch 38;
 
}

<div>
123
</div>

Answer 3

在 strech 属性之前需要一个宽度值

 border-image: url(https://i.ibb.co/TqBJP5d/border-1.png) 30 stretch;