使用带有CSS边框的图像

Question

我有这个图像，我想用作边框。

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

我可以使用css border属性但看起来不正确，因为边框会将图像传递到顶部，底部和中心。可以这样做，如果是这样，我该怎么做？

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

编辑：

如果 侧列或中心列增长，是否有办法让这些边框增加高度？

<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轴上重复。