如何使用 css 添加边框底部图像

Question

我创建了以下图像，以在我的网站中的所有 h1 标题标签下呈现。麻烦的是，我在网上找到的每个教程都将边框图像属性作为一个环绕边框。

我想要实现的只是在标题下方放置一张小图片，一次。没有重复。居中。根据这个http://www.css3.info/preview/border-image/ 有一个名为border-bottom-image 的属性。但我似乎无法让它正确显示。

Google chrome 开发者工具告诉我这是一个未知的属性名称。如果我用下面的 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”在最新版本的 Google Chrome（本机）中仍然不起作用。但是“边界图像”可以。您可以使用（右上左下）协议为每个单独部分定义宽度：

.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