如何仅在一侧使用边框图像？

Question

我有一个图像,我想将其设置为元素的边框,但仅作为底部边框: < - 太小了 - 但它就在那里.

这是我到目前为止所得到的:

<style>
body { margin: 0; padding: 10px; }
    h1 {
background-color: red;
    border: solid transparent;
    border-width: 2px;
    border-image: 2 repeat url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAADCAYAAACqPZ51AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpiZGBgOMOABv7//48uxMDEQCQgWiFAgAEAjqADz4EvP7IAAAAASUVORK5CYII=");
}
</style>
<h1>Bacon</h1>
<p>Bacon ipsum dolor sit amet tenderloin drumstick ribeye filet mignon t-bone beef ribs. Tri-tip venison turkey salami drumstick chicken pastrami. Frankfurter pork jowl ball tip tail.</p>

或者参见JS Fiddle:http://jsfiddle.net/eqpt5/.

正如您所看到的,这会将边框图像放在顶部和底部(以及两侧 - 尽管您看不到它).如何在底部使用边框图像border-image？

Answer 1

更改border-width:2px到border-width:0 0 2px

这样,您实际上设置边框底部宽度为2px,其他边宽度等于零

演示http://jsfiddle.net/naveenksh/eqpt5/3/