Html DIV'的顶部和底部有不同的图像；边界

我有一个正在开发的站点，其中一个要求是它不能使用任何客户端脚本（jQuery/JavaScript）。既然我对CSS不是很在行，我就有点被困在这里了

我有一个简单的div，它应该有一个“边框图像”。但是我不能使用CSS

边框图像

，因为它不适用于IE（已经测试过了），而且我不能为顶部和底部获得两个不同的图像来处理

背景图像：

-所以现在我想知道我能做些什么

下面是它的外观，两个箭头都是2个png文件：

---

有没有办法做到这一点？仅使用1个div和2个图像？没有JavaScript，并且保持跨浏览器的兼容性（除了一些例外，如ie6这在IE9、Firefox、Chrome、Opera和Safari中都可以使用

代码：

    <style>
      #Container {
        width: 400px;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
        border:1px solid #000000;
      }


      .boxTop {
        position: relative;
        left: 100;
        top: 100;
        width: 200px;
        height: 10px;
        background-color:#00CC00;
        /*place background image css code here and remove line above*/
      }

      .box {
        position: relative;
        left: 100;
        top: 100;
        width: 200px;
        height: 200px;
        background-color:#CC0000;
      }

      .boxBtm {
        position: relative;
        left: 100;
        top: 100;
        width: 200px;
        height: 10px;
        background-color:#0000CC;
        /*place background image css code here and remove line above*/
      }
    </style>

    <div id="Container">
        <div class="boxTop"></div>
        <div class="box"></div>
        <div class="boxBtm"></div>
    </div>

#容器{
宽度：400px；
高度：400px；
左边距：自动；
右边距：自动；
边框：1px实心#000000；
}
.boxTop{
位置：相对位置；
左:100 ;；
排名前100名；
宽度：200px；
高度：10px；
背景色：#00CC00；
/*在此处放置背景图像css代码，并删除上面的行*/
}
.盒子{
位置：相对位置；
左:100 ;；
排名前100名；
宽度：200px；
高度：200px；
背景色：#CC0000；
}
.boxBtm{
位置：相对位置；
左:100 ;；
排名前100名；
宽度：200px；
高度：10px；
背景色：#0000CC；
/*在此处放置背景图像css代码，并删除上面的行*/
}

Darcey的解决方案非常好。方框div内部有3个div，中间一个用于内容，另外2个用于图像（带有css属性背景图像）

如果您不想修改html，可以尝试使用css:before和：after

---

第一种解决方案：只使用

渐变

s。无图像，无额外元素，甚至无伪元素

当然，

gradient

s不受IE9及更老版本的支持，因此另一种解决方案是使用多个背景

---

IE8和更早版本不支持CSS3方式的多个背景，但您可以使用

AlphaImageLoader

过滤器

作为这些浏览器的后备。如果块具有固定的

高度和
宽度，只需设置一个背景图像和
填充
即可。如果块具有固定的
宽度，请使用@Mr.Alien的so解析度。如果它有固定的
高度
水平裁剪图像，并制作背景
重复-x
。如果
宽度
和
高度
都是动态的，我建议使用2-3个额外的div（我知道你想避免它），我不认为玩
：before
和
：after
更好。
只玩一个div，他应该尝试：before/:afer，正如我所说，但我认为3个div的方法更安全