[英]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;
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
將邊框圖像僅放在底部?
更改border-width:2px
到border-width:0 0 2px
這樣,您實際上設置邊框底部寬度為2px,其他邊寬度等於零
border-bottom-width: 1px;
把它放在你的其他邊框之后,以覆蓋特定的邊框。
你可以用簡短的手,但我認為這更容易閱讀。
你可以給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;
}
除了最佳答案。 由於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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.