image - 在 CSS 中使用 8 个单独的边框图像而不是边框​​图像

Question

我已经为主要（固定宽度）内容框周围的边框提供了 8 个单独的图像（左上、上、右上等）。如果给我一张图片，我会使用border-image。

使用 8 张图片的最佳方式是什么？绝对定位的div？还是我应该将它们组合成一个这样的痛苦？

Answer 1

将图像合二为一有什么难的？它还有许多其他优点，例如减少客户端需要发出的 HTTP 请求的数量。

另一种方法是使用 CSS3 的多背景图像功能，您可以将每个图像设置为框中的一个图层。

Answer 2

Eric Myer 使用了一种技术（只是为了解释技术）图像是一个小圆圈。然后，这是四个独立 div 中的背景图形，每个 abs 都位于包含 div 的角上，具有相对位置。每一个的背景位置都发生了变化，直线使用了一个规则的边框，实际上得到了圆角。圆圈必须填充白色或您使用的任何 bckgrnd 颜色。

这样一来，就可以展开了。如果发生变化，您仍然需要扩展高度，对吗？

我会为顶部和底部制作一个，第三个在 Y 上重复作为中间，这样如果添加内容，你的盒子就会扩大。高度也就是。