Javascript 什么'；使用截面构建具有可变高度和宽度的背景图像的最佳方法是什么？

我正在尝试为几个不同宽度/高度的div创建具有圆角和可变宽度和高度的粗糙边缘的背景图像

你可以在开发中的网页上看到我所说的那种图像的例子

对我来说最有意义的方法是在Photoshop中设计一个图像，然后拼接两个部分，一个20px×20px的部分用于拐角，一个20px×200px的部分用于侧面。这样的想法是重用这些图像，旋转90度、180度和270度，以尽量减少所需的图像数量。然后我将创建一个细分为多个部分的DIV。这些部分将对应于角的大小，并且每个部分都有一个角图像的背景URL（旋转3次），或者侧面部分的宽度或高度不同，即20px。如果这些div的宽度/高度大于200px，则将重复背景图像。显然，我需要注意角部和侧部是如何连接的，这可能并不总是一个完美的连接，因为边缘粗糙，但我希望，因为它粗糙，所以不会太重要！由于整个图像仅使用一种颜色，因此图像中心的DIV/部分仅具有纯色背景

因此，我想知道这是否是解决这个问题的最佳方式，如果不是，是什么。如果是，我将如何处理旋转的角落/侧面部分。我不认为有背景属性可以做到这一点。这是javascript的任务吗

谢谢

---

尼克

我刚才回答了一个非常类似的问题：

您可能可以使用CSS3的

边框图像

属性实现此效果

您可以在此处看到一些示例：

在这里：

---

谢谢，我会调查的。但据我所知，border image属性在IE中不起作用。因此，我想知道是否最好使用跨浏览器解决方案，或者使用border image属性作为IE的后备方案，如果是，IE的后备方案是什么？也许这会有所帮助：谢谢。我现在正在使用边界属性。我无法让IE版本正常工作，所以我在IE中使用其他CSS样式