div下方的postion边界图像

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）

描述边界图像区域延伸超出边界框的量。

四参数值的定义是：

边界图像开始：右上左下

因此，在您的情况下更改第三个参数会将边界进一步向下扩展：

div{
    /* ... */
    border-image-outset: 0px 0px 20px 0px; 
    /* ... */
}

更新的Fiddle

Answer 2

边框将始终位于包含框的全长（元素的高度加上其填充），除了调整其应用的元素的高度外，无法控制边框。

您可以通过在div:之后使用span来达到您的目标

<div></div>
<span class="divider"></span>
span {
height: 5em;
border:.../your border
}