css - CSS3 中的顶部边框图像

Question

我用过 border , border-top-image , border-image似乎没有人做我想做的事。

我有以下 CSS:

#footer {
    overflow: hidden;
    clear: both;
    width: 100%;
    margin: 0 auto;
    padding: 26px 0 30px 0;
    border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg');
    font-size: 0.8461538461538462em;
    color: #aaa;
}

这似乎不适用于我正在尝试处理的网站，我已经在 Firefox 和 Chrome 中尝试过。

我只希望图像出现在顶部边框上并且不希望有其他边框(所以它有点像 <hr /> )

Answer 1

我认为没有像 border-top-image 这样的属性可以为元素的任何一侧提供图像边框 - 使用

border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30 round;

但它在所有边上都给出了边界。要删除我给出的其余边的边框 -

border-bottom:0;
border-left:0;
border-right:0;

成功了，这是我的 fiddle - http://jsfiddle.net/ashwyn/c7WxG/1/