如何在HTML与CSS中正确设置图片为边框？现有代码不生效是什么原因？

• 没有显式设置border属性：border-image 生效的必要前提是元素已经配置了非none的border样式和对应的边框宽度，你的代码里没有设置基础border属性，所以边框图无法正常加载渲染。
• 缺失border-image切片参数：你只填写了图片地址和stretch拉伸模式，没有配置图片切片尺寸，浏览器无法识别如何切割边框图适配元素的四个角和四条边，也是失效的核心原因。

div {
  width: 240px;
  height: 510px;
  background-color: lightblue;
  /* 新增基础边框配置：边框宽度可按需调整，样式设为solid，颜色设为透明避免覆盖边框图 */
  border: 30px solid transparent;
  /* 补充切片参数，数值和边框宽度保持一致即可让边框图正常铺满 */
  border-image: url(https://i.ibb.co/TqBJP5d/border-1.png) 30 stretch;
}

<div>
    123
</div>

• 如果你的边框图本身有固定的设计边宽，切片数值要和设计图里的边框宽度保持一致，才能保证边角图案不会变形。
• 如果你需要调整边框图的显示位置，可以额外添加border-image-outset属性控制边框图向外偏移的距离。

内容的提问来源于stack exchange，提问作者ImAlex2000