如何使用css添加邊框底部圖像

Question

我創建了以下圖像以在我網站的所有 h1 標題標簽下呈現。 問題是，我在網上找到的每個教程都將邊框圖像屬性作為全方位邊框進行討論。

我想要實現的只是在標題下放置一個小圖像，一次。 沒有重復。 居中。 根據這個http://www.css3.info/preview/border-image/有一個名為 border-bottom-image 的屬性。 但我似乎無法讓它正確顯示。

谷歌瀏覽器開發者工具告訴我這是一個未知的屬性名稱。 如果我無法使用以下 css3 實現這一點，我該如何實現？

.entry-title{
border-bottom-image: url(images/title-borderbottom.jpg);
}

Answer 1

這里有兩個選項可以讓你做你想做的事，而不必求助於border-image ，這並不是真正為你想做的事情而構建的。

背景圖像 + :after

這使用偽元素（ :after ）“插入”一個塊，其中包含給定的圖像作為background-image 。 我認為這可能比下一個選項更好，因為它對元素樣式的破壞最小。

.entry-title:after {
    content: "";
    display: block;
    height: 70px;
    background-image: url(http://placehold.it/350x65);
    background-repeat: no-repeat;
    background-position: center bottom;
}

http://jsfiddle.net/mh66rvbo/2/

背景圖像 + 填充

這使用padding-bottom為圖像騰出空間，然后沿着元素的底部粘貼圖像，定位在中心。

.entry-title {
    padding-bottom: 70px;
    background-image: url(http://placehold.it/350x65);
    background-repeat: no-repeat;
    background-position: center bottom;
}

http://jsfiddle.net/mh66rvbo/1/

Answer 2

為我工作....

.entry-title{
    border-bottom: 20px solid #000;
    border-image:url('bottom.jpeg');
    border-image-repeat: round;
    border-image-slice: 300;
    text-align: center;
    margin: 0px auto;
    width:70%;
}

Answer 3

從您提供的鏈接（ http://www.css3.info/preview/border-image/ ）

border-image 目前適用於 Safari 和 Firefox 3.1 (Alpha)。

根據我的理解，“border-bottom-image”在最新版本的谷歌瀏覽器（原生）中仍然不起作用。 但是“邊框圖像”確實如此。 您可以使用（左上右下）協議為每個單獨的部分定義寬度：

 .entry-title{ border-image: url(images/title-borderbottom.jpg); border-image-width: 0 0 10px 0; border-image-repeat: stretch; }

詳情： http : //www.w3schools.com/cssref/css3_pr_border-image.asp

Answer 4

border-bottom-image屬性不適用於css3

我想知道如何使用邊框底部的圖像來分享方式並解決此問題