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 に答える