css - 为边框底部属性设置图像

Question

我们都知道

border-bottom: 2px solid #000;

将使底部边框厚2px，颜色为黑色

但是我们可以为边框底部做任何这样的事情吗？我们可以设置一个图像

这意味着一个薄的水平图像将是 div 的底线边框？

提前致谢

Answer 1

border-image, 可能是你想要的，但它是 CSS3。请参阅http://www.w3schools.com/cssref/css3_pr_border-image.asp。

我会设置positon:relative;在容器上<div>并position:absolute; bottom:0;用于<img />容器内部。

Answer 2

您可以通过设置图像来模拟图像边框底部

background: url(...) bottom repeat-x;

或者

background: url(...) bottom no-repeat;
background-size: 100% 3px;

与实际不同border-image，这将在 IE 中工作（第一个示例为 IE7+，后一个示例为 IE9+）。