如何在div内部放置边框图像[复制]

时间:2022-11-25 14:22:55

This question already has an answer here:

这个问题在这里已有答案:

When using border-image CSS property, the border is placed outside of div. Is there any way to put the border image inside of div?

使用border-image CSS属性时,边框位于div之外。有没有办法把边框图像放在div里面?

border-width: 50px;
border-image: url(Border.png) 50 repeat;

1 个解决方案

#1


1  

Codepen link

Codepen链接

Is that what you mean?

你是这个意思吗?

HTML

HTML

<div>
 <span>

 </span>
</div>

CSS

CSS

div {
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

span {
  box-sizing: border-box;
  display: block;
  width: 200px;
  height: 200px;
  border-width: 50px;
  border-image: url(https://www.castlejackpot.com/wp-content/uploads/dynamik-gen/theme/images/home-horizontal-border.png) 50 repeat;
}

#1


1  

Codepen link

Codepen链接

Is that what you mean?

你是这个意思吗?

HTML

HTML

<div>
 <span>

 </span>
</div>

CSS

CSS

div {
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

span {
  box-sizing: border-box;
  display: block;
  width: 200px;
  height: 200px;
  border-width: 50px;
  border-image: url(https://www.castlejackpot.com/wp-content/uploads/dynamik-gen/theme/images/home-horizontal-border.png) 50 repeat;
}