如何使用css添加border-bottom-image

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并非真正针对您的目标而构建。

background-image +：在

之后

这使用伪元素（background-image）来＆＃34;插入＆＃34;将您的指定图像作为.entry-title:after { content: ""; display: block; height: 70px; background-image: url(http://placehold.it/350x65); background-repeat: no-repeat; background-position: center bottom; } 的块。我认为这可能比下一个选项更好，因为它对元素造型的破坏性最小。

padding-bottom

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

background-image + padding

这使用.entry-title { padding-bottom: 70px; background-image: url(http://placehold.it/350x65); background-repeat: no-repeat; background-position: center bottom; } 为图像腾出空间，然后沿着元素的底部粘贴图像，定位在中心。

{{1}}

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

Answer 2

从您提供的链接（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

Answer 3

border-bottom-image属性不适用于css3

我想知道如何使用边框底部的图像 请分享解决方法

Answer 4

为我工作....

.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%;
}