CSS CSS3中的顶部边框图像

Top Border Image in CSS3

提问by Dean

I've used border, border-top-image, border-imageand none seem to do what I am after.

我用过border, border-top-image，border-image似乎没有人做我所追求的。

I have the following CSS:

我有以下 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;
}

This does not seem to apply to the website I am trying to work on, I've tried it in Firefox and Chrome.

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

I only want the image to appear on the top border and wish to have no other borders (so it's sort of like a <hr />)

我只希望图像出现在顶部边框上，并且希望没有其他边框（所以它有点像<hr />）

回答by Ashwin

I don't think that there is any such property like border-top-imageto give image border to any side of an element - Use

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

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

but it give border around all sides. To remove border around rest of the sides I gave -

但它在所有方面都给出了边界。为了去除我给出的其余边周围的边框 -

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

It worked and here is my fiddle - http://jsfiddle.net/ashwyn/c7WxG/1/

它有效，这是我的小提琴 - http://jsfiddle.net/ashwyn/c7WxG/1/

回答by Benji XVI

There is the border-image-width: a b c d;property. The details:

有border-image-width: a b c d;物业。细节：

• a-dare the widths of the top, right, bottom and left borders, respectively
• values of a-d may be in the form:
  • [x]px
  • [x]- multiples of border-width value
  • [x]%- percent of the image slice (appears non-working in Safari 7)
  • auto- derive from the width of the corresponding image slice
• the default value is 1.
• if you omit d, the value of bis used for the left border width
• if you also omit c, the value of ais also used for the bottom border width
• if you also omit b, the value of ais used for all borders :)

• a-d分别是上、右、下、左边框的宽度
• ad 的值可以采用以下形式：
  • [x]px
  • [x]- 边框宽度值的倍数
  • [x]%- 图像切片的百分比（在 Safari 7 中似乎不起作用）
  • auto- 从相应图像切片的宽度派生
• 默认值为1。
• 如果省略d，则 的值b用于左边框宽度
• 如果您也省略c，则 的值a也用于下边框宽度
• 如果您也省略b，则值a用于所有边框:)

So for your example you could use:

因此，对于您的示例，您可以使用：

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

Alternatively the border-imageshorthand property includes border-image-widthas a parameter, so in one line of CSS:

或者，border-image速记属性包含border-image-width作为参数，因此在一行 CSS 中：

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

This uses the entire image for the top slice ("100% 0 0 0") and applies it as the top border at the desired width.

这将整个图像用作顶部切片（“100% 0 0 0”）并将其应用为所需宽度的顶部边框。

回答by T.Todua

Another SOLUTION- create visual "BEFORE"phseudo-element :

另一个解决方案- 创建视觉“BEFORE”phseudo-element ：

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

回答by sebilasse

You said you wish to have no other borders, so instead of border-image-widthyou can also simply use the border-widthshorthand :

你说你不希望有其他边界，所以border-image-width你也可以简单地使用border-width简写：

see https://jsfiddle.net/j2x6n3q9/

见https://jsfiddle.net/j2x6n3q9/

回答by xan

The border image is specified as a URI, for two different groups: The URI of upto three images may be specified for each of the four border edges. If one image URI is given, the first tile is centered on the border line. If two image URIs are given, they meet at the center of the border line with the first image placed on the top or left side of the center. If three image URIs are given, the second becomes the center and does not tile. The other two are placed on either side of the center image, with the first going on the top or left side of the center and the third going on the bottom or right.

边界图像被指定为 URI，用于两个不同的组： 可以为四个边界边缘中的每一个指定最多三个图像的 URI。如果给出了一个图像 URI，则第一个图块以边界线为中心。如果给出了两个图像 URI，它们会在边界线的中心相遇，第一个图像位于中心的顶部或左侧。如果给出三个图像 URI，则第二个成为中心并且不会平铺。另外两个位于中心图像的两侧，第一个位于中心的顶部或左侧，第三个位于底部或右侧。

For more refer w3.org

有关更多信息，请参阅 w3.org