html - 有没有更有效的方法用 CSS 制作 div 背景和边框？

Question

在我的应用程序中，我有大量具有相同背景和边框但大小不同的 div。

为其中的每一个使用一个特定的背景图像是非常低效的，尤其是在带宽和性能方面。

我将向您展示背景 div 和边框，并告诉您我想要做什么。

所以我认为将 div 分成 4 个角（总是相同的）、4 个边（背景重复：重复 x 或重复 y）和一个中心 div 会更有效

您认为使用 CSS 2 有更好的方法吗？（我不想使用 CSS 3，以获得最大的兼容性）

对于客户端的浏览器或服务器来说，这会消耗资源吗？

Answer 1

我建议使用box-shadowand border-radius：

div {
  width: 200px;
  height: 125px;
  margin: 25px auto;
  background: white;
  border: 1px solid #aaaaaa;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1), -1px 0 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1), -1px 0 3px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1), -1px 0 3px rgba(0, 0, 0, 0.1);
}

演示