Question

我正试图在div的右侧放置边框图像。我成功地做到了这一点。但问题是，我希望边框图像在div下面稍微伸展一点。是否可以增加边框图像的高度？或者我应该将图像漂浮在div旁边，我应该怎么做？

div{
    height:200px;
    width:200px;
    background:#EA6E0E;
    border-image-slice: 0 31 0 0; 
    border-image-width: 0px 20px 0px 0px; 
    border-image-outset: 0px 0px 0px 0px; 
    border-image-repeat: stretch stretch; 
    border-image-source: url("http://i.imgur.com/pN8TPVw.jpg?1");
}

<div></div>

Answer 1

如果我理解你的意思，你应该使用border-image-outset属性，{（{3}}）

描述边框图像区域延伸到边框之外的数量。

四参数值的定义是：

border-image-outset：右上角左下方

因此，更改案例中的第三个参数会使边界进一步向下延伸：

div{
    /* ... */

    border-image-outset: 0px 0px 20px 0px; 

    /* ... */
}

MDN Docs

Answer 2

边框将始终位于包含框的整个长度（元素的高度加上其填充），除了调整其应用的元素的高度之外，它不能被控制。

您可以在div之后使用span来达到目标：

<div></div>
<span class="divider"></span>

span {
height: 5em;
border:.../your border
}

位于div下方的边界图像

2 个答案: