是否有更有效的方式使用CSS制作div背景和边框？

Question

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

对每一个特定的背景图像使用一个特定的背景图像是非常低效的，特别是对于带宽和性能。

我会告诉你背景div和border，并告诉你我想要做什么。

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

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

这会对客户端的浏览器或服务器造成资源消耗吗？

Answer 1

我建议使用box-shadow和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);
}

Demo