只使用CSS底部的邊框圖像

我想要使用圖像作爲邊框，但只是爲了底部 - 這可以在CSS中實現嗎？我已經對它進行了簡單的研究，並且即時閱讀關於切片等內容，但是我不太明白。只使用CSS底部的邊框圖像

我認爲有可能是這樣的下邊框，圖像或類似......

感謝

2013-05-04 user1278496

可能的重複[只使用邊框圖像的底部邊框？我們的CSS似乎跨整個div複製圖像，而不是]（http://stackoverflow.com/questions/10164393/use-border-image-only-for-bottom-border-our-css-seems-to-replicate-該圖像交流） – jtheman 2013-05-04 22:59:37

檢查了這一點http://stackoverflow.com/questions/8337566/why-doesnt-the-border-bottom-image-css-property-work – 2013-05-04 23:02:39

Infact它不能解決我的問題，因爲問題上該頁面本身從未解決.. – user1278496 2013-05-04 23:11:17

首先讓你的HTML是這樣的：

<div class="container block"> 
    <div class="content block"> 
     <---!Putt content here!---> 
     <div class="border-bottom block"> 
      <---!Make it empty!---> 
     </div> 
    </div> 
</div>

然後讓CSS是這樣的：

.block 
{ 
    display:block; 
    position:relative; 
    width: xpx; /*choose your width (x) */ 
} 

border-bottom 
{ 
    background: url('picture url'); 
}

PS：您可以重複這個就像你想並且您將始終具有這些類的樣式（只需複製並超過HTML代碼）

來源

2013-05-04 23:28:14

以另一種方式或許認爲這一點。你想要一個圖像沿着元素的底部出現。它可能看起來像一個邊框，但它不一定是叫之一。獲得所需視覺效果的簡單方法是在元素上放置一些填充物，然後將該圖像作爲背景圖像放置在該填充區域中。例如。

element {padding-bottom: 20px; background: url(bgimage.png) no-repeat 50% 100%;}

來源

2013-05-04 23:18:44

您可以使用此CSS屬性：

border:solid; 
border-bottom-width:10px; //thickness of border 
border-image:url(image.jpg) 0 0 20 0 repeat; //20 is length of your image

來源

2015-03-21 21:34:59

只使用CSS底部的邊框圖像

回答

相關問題