9

我有一个图像，我想将其设置为元素的边框，但仅作为底部边框：边框图像<- 它很小 - 但它就在那里。

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

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

4

4 回答 4

18

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

通过这种方式，您实际上设置边框底部宽度 2px 和其他边宽度等于零

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

于 2012-11-21T04:46:45.443 回答
2 
border-bottom-width: 1px;

将它放在您的其他边框内容之后以覆盖特定的边框边。

您可以使用简写，但我认为这更容易阅读。

于 2012-11-21T04:12:16.450 回答
1

你可以border-top:none;根据你想要的结果让它工作正常......

CSS

h1 {
background-color: red;
    border: solid transparent;
    border-width: 2px;
    border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAADCAYAAACqPZ51AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpiZGBgOMOABv7//48uxMDEQCQgWiFAgAEAjqADz4EvP7IAAAAASUVORK5CYII=") 2 repeat;
    border-top:none;
}

演示

于 2012-11-21T05:06:04.620 回答
-1

除了最佳答案。由于border-image 覆盖了border-style，要获得另一边的边框，只需将div 与另一个div 包装，然后声明边框。

HTML：

<div id="wrapper">             //div with border style
 <div id="content"></div>      //div with border image
</div>

CSS：

#wrapper {
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#content {
border-image: url(../images/blue-bg.png) 0 0 0 50;
border-left-width: 10px;

}

于 2015-09-28T04:14:35.437 回答