html - 如何仅沿一侧使用边框图像？

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/