css - 使用带有 css 边框的图像

Question

我有这张我想用作边框的图像。

有 3 个内联列，其中有 2 个图像将中心列与左右列分开。

我可以使用 cssborder属性，但它看起来不正确，因为边框通过顶部、底部和中心的图像。可以做到这一点，如果可以，我该怎么做？

要记住的是，如果中心列增长，图像的高度也需要随之增长。我想远离在页面上设置高度。

编辑：

如果侧柱或中心柱增长，有没有办法让这些边界的高度增长？

<style>
#col1{
display:inline;
float:left;
width:100px;
border:1px solid
}

#col2{
display:inline;
float:left;
width:300px;
border:1px solid
}

#col3{
display:inline;
float:left;
width:100px;
border:1px solid
}
</style>

<div id="col1">1</div>
<div id="col2">2</div>
<div id="col3">3</div>

你现在看到的边界，它们应该被这个图像替换，但是图像应该随着最高的列而增长，无论是哪一个。

Answer 1

要使用图像边框：

img {border-left: 1px solid #ccc;}
/* assuming that the image is right and you need a border to the left. */

---

从评论中，尝试了这个......

HTML

<div class="wrap">
    <div class="left"><textarea></textarea></div>
    <div class="right">
        <img src="http://i.imgur.com/Dhu0f.jpg" alt="grow" />
    </div>
</div>​

CSS

.wrap {overflow: hidden; height: auto;}
.left, .right {float: left; height: 100%;}
.right img {height: 100%; width: auto;}​

小提琴：http: //jsfiddle.net/N2bVR/

---

更新：

您的问题的最佳选择是，将边框图像作为背景图像运行到身体并在 y 轴上重复。