Question

我如何获得用于环绕整个边界的图像？它只显示在顶部和底部。我使用border-image.com来缩小它，但我只能在顶部或底部或左右边界上获得所需的结果。我基本上希望图像以一致的方式重复包裹（公司的徽标在所有边框中重复），而不必以任何方式拉伸，操纵或缩放它。我真的很感激任何帮助？

Here's what I have so far

HTML：

 <div id="outer_container">
 ...
 </div>

CSS：

#outer_container {
height: 1495px;
width: 925px;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #E7EAF5;
border-radius: 15px;
border-style: solid;
border-width: 38px 38px 38px 38px;
border-image: url(http://lorempixel.com/81/81/) 81 0 fill repeat stretch;
}

Answer 1

问题是您在81之后添加的0。如果删除该数字，边框将应用于所有边框

border-image: url(http://lorempixel.com/81/81/) 40 fill repeat stretch;

http://jsfiddle.net/4rjw6/

Answer 2

您可以使用div来完成此任务：

HTML：

<div id="div-top"></div>
<div id="div-left"></div>
<div id="container">
</div>
<div id="div-right"></div>
<div id="div-bottom"></div>

CSS：

#div-top,
#div-bottom {
    width: 925px;
    height: 81px;
    background: url('http://lorempixel.com/81/81/') repeat-x;
    clear: both;
}

#div-left,
#div-right {
    width: 81px;
    height: 1495px;
    background: url('http://lorempixel.com/81/81/') repeat-y;
}

#div-left,
#div-right,
#container {
    float: left;
}

#container {
    height: 1495px;
    width: 763px;
    background-attachment: fixed;
    background-color: #E7EAF5;
}

小提琴：http://jsfiddle.net/6MghG/1/ （请注意，您需要放大小提琴预览框才能正确显示;它应该可以在浏览器窗口中正常工作。）

这样做的另一个优点是更广泛的浏览器兼容性 - 例如，IE10不支持边框图像。

Answer 3

您可能会发现逐个指定边框的属性会更容易。我在你的小提琴中尝试了这个：http://jsfiddle.net/6MghG/2/

border-image-source:url(http://lorempixel.com/81/81/); /* where the image comes from */
border-image-slice: 33.3%; /* chop that image into 9 pieces each one-ninth the total area */
border-image-width: 50px; /* just how wide to draw the border. Overrides border-width. */
border-image-repeat: round; /* change the image size along the edges to make it fit neatly */

这看起来对我很好。您必须获取要使用的徽标，并将其中的九个副本放在一个图像中才能使用此技术。

border-image不会环绕整个边框

3 个答案: