如何只使用一边的边框图像？ [英] How to use border image along one side only?

问题描述

我有一个图片，我想设置为元素上的边框，但只显示为底部边框：

这里是我到目前为止：

 < style> 
 body {margin：0; padding：10px; } 
 h1 {
 background-color：red; 
 border：solid transparent; 
 border-width：2px; 
边界图像：2的重复URL（数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAoAAAADCAYAAACqPZ51AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpiZGBgOMOABv7 // 48uxMDEQCQgWiFAgAEAjqADz4EvP7IAAAAASUVORK5CYII =）; 
} 
< / style> 
< h1> Bacon< / h1> 
< p>培根ipsum dolor sit amet里脊肉鸡胸肉片小牛肉t骨牛排。三小提琴鹿肉火鸡蒜味咸腊肠鼓槌鸡肉五香熏牛肉。法兰克福猪肉猪肉球头尖。< / p> 
  

或参阅JS Fiddle： http://jsfiddle.net/eqpt5/ 。

正如你所看到的，这将边框图像放在顶部和底部（和边 - 虽然你看不到它）。如何使用 border-image ？

解决方案

将 border-width：2px 更改为 border-width：0 0 2px

这样，你实际上是设置边框底部宽度2px和其他边宽度等于零

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

I have an image that I'd like to set as the border on an element, but only as the bottom border: <- It's teeny - but it's right there.

Here is what I've got so far:

<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>

Or see JS Fiddle: http://jsfiddle.net/eqpt5/.

As you can see, this puts the border image on both the top and bottom (and the sides - though you can't see it). How can I put a border image on only the bottom using border-image?

解决方案

Change border-width:2px to border-width:0 0 2px

In this way you are actually setting border bottom width 2px and other sides width equal to zero

Demo http://jsfiddle.net/naveenksh/eqpt5/3/

这篇关于如何只使用一边的边框图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！