html - 在 div 下方放置边框图像

Question

我想在 div 的右侧放置一个边框图像。我已经成功地做到了。但问题是，我希望边框图像在 div 下面稍微拉伸(stretch)一点。是否可以增加边框图像的高度？或者我应该将图像 float 到 div 旁边，我应该怎么做？

这是一个 sample code

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 )

describes by which amount the border image area extends beyond the border box.

四个参数值的定义是:

border-image-outset: top right bottom left

因此，在您的案例中更改第三个参数会使边界向下延伸一点:

div{
    /* ... */

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

    /* ... */
}

Updated Fiddle