15

我用过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 />）

4

5 回答 5

20

我不认为有任何这样的属性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/

于 2012-06-12T12:19:58.080 回答
8

有财产border-image-width: a b c d;。细节：

  • a-d分别是上、右、下、左边框的宽度
  • ad 的值可能采用以下形式：
    • [x]px
    • [x] - 边框宽度值的倍数
    • [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”）并将其应用为所需宽度的顶部边框。

于 2014-05-24T00:46:05.893 回答
6

另一个解决方案 - 创建视觉“之前”伪元素： 

.yourDiv::before{
    background:url("http://lorempixel.com/200/100/");
    width:100%;
    height:20px;
}
于 2015-05-23T20:08:54.900 回答
0

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

见https://jsfiddle.net/j2x6n3q9/

于 2019-12-11T08:09:47.993 回答
-2

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

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

于 2012-06-12T12:24:46.453 回答