为border-bottom属性设置图像

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 +）。