html - 边框图像重复不起作用

Question

我想用三 Angular 形的重复图像制作顶部和底部边框。但是达不到这个结果。我只得到一个三 Angular 形。 如何得到图中重复的三 Angular 形？

我的 CSS:

border-style: solid;
border-width: 5px 5px 18px 20px;
border-image: url('../../img/triangle.png') 0 0 18 20 fill stretch;

Answer 1

您正在使用快捷方式“border-image”属性。这里的stretch对应于border-image-repeat属性。将其设置为“重复”而不是拉伸(stretch)。

此外，您以错误的方式使用了属性“border-image-slice”。有很好的解释here .

您可以找到更多关于 border-image 属性的一般信息 here .

我建议您在第一次使用属性时使用详细版本:

.banner{
    width:600px;
    height: 200px;
    border-style: solid;
    border-width: 20px 0px 20px 0px;
    border-image-source: url('https://whatsarahread.com/wp-content/uploads/sites/113/2015/02/triangle-border.png');
    border-image-slice: 100% 0%;
    border-image-repeat: repeat;
}

<div class="banner"></div>