div下面的位置邊框圖像

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屬性，即（ MDN Docs ）

描述邊界圖像區域超出邊界框的量。

四個參數值的定義為：

border-image-outset： 右上左下

因此，在您的情況下更改第三個參數將使邊框進一步向下延伸：

div{
    /* ... */

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

    /* ... */
}

更新小提琴

Answer 2

邊框將始終處於包含框的整個長度（元素的高度加上其填充），除調整其所應用元素的高度外，不能控制邊框。

您可以通過在div之后使用跨度來達到目標​​：

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

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