-1

私のアプリケーションでは、同じ背景と境界線を持つがサイズが異なる多数の div があります。

それらのすべてに 1 つの特定の背景画像を使用することは、特に帯域幅とパフォーマンスの点で非常に非効率的です。

背景の div と境界線を表示し、代わりに何をしたいかを説明します。

これは私のdivがどのように見えるかです

そのため、div を 4 つのコーナー (常に同じもの)、4 つの側面 (background-repeat: 繰り返し x または繰り返し y)、および 1 つの中央の div に分割する方が効率的であると考えました。

ここに画像の説明を入力

CSS 2 でこれを行うためのより良い方法があると思いますか? (最大の互換性のために、CSS 3 を使用したくありません)

これは、クライアントのブラウザまたはサーバーのリソースを消費しますか?

4

1 に答える 1

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);
}

デモ

于 2012-11-05T02:10:58.960 に答える