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中尝试过了.

我只希望图像出现在顶部边框上,并希望没有其他边框(所以它有点像a <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;

它工作,这是我的小提琴 - http://jsfiddle.net/ashwyn/c7WxG/1/

Answer 2

还有就是border-image-width: a b c d;财产.细节:

• a-d 分别是顶部,右侧,底部和左侧边框的宽度
• 广告的价值可能是以下形式:
  • [x]px
  • [x] - border-width值的倍数
  • [x]% - 图像切片的百分比(在Safari 7中显示不起作用)
  • auto - 从相应图像切片的宽度导出
• 默认值是1.
• 如果省略d,则值的值b用于左边框宽度
• 如果您也省略c,则值a也用于底部边框宽度
• 如果你也省略b,则值a用于所有边框:)

因此,对于您的示例,您可以使用:

border-image-width: 100% 0 0 0;

或者,border-image速记属性包括border-image-width作为参数,因此在一行CSS中:

border-image: url(image.png) 100% 0 0 0 / [desired_border_width]px 0 0 0 repeat;

这将整个图像用于顶部切片("100%0 0 0")并将其应用为所需宽度的顶部边框.

Answer 3

另一个解决方案 - 创建视觉"BEFORE"伪元素:

.yourDiv::before{
    background:url("http://lorempixel.com/200/100/");
    width:100%;
    height:20px;
}