html - CSS - グラデーションの背景で丸みを帯びた領域をスタイルする方法は?

Question

上記の画像背景をCSSでスタイルする方法、ベストプラクティスは何か、アドバイスについてお聞きしたいと思います。

デザイナーにレイアウトしてもらいました。これは背景です。境界線と同じように、銀色から白 (上から下) へのグラデーションがあります。

左上隅と右上隅が丸くなっています (3px のようです)。

私は最も効果的な方法、このことをコーディングする方法を見つけようとしていますが、残念ながらまだ最善のアプローチを見つけることができません...

Answer 1

要素で css を使用する:

.gradient-bg {
   /* fallback/image non-cover color */
   background-color: /*start color*/; 

   /* fallback image */
   background-image: url(images/fallback-gradient.png); 

  /* Safari 4+, Chrome 1-9 */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(/*start color*/), to(/*end color*/));

  /* Safari 5.1+, Mobile Safari, Chrome 10+ */
  background-image: -webkit-linear-gradient(top, /*start color*/, /*end color*/); 

  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(top, /*start color*/, /*end color*/);

  /* IE 10+ */
  background-image: -ms-linear-gradient(top, /*start color*/, /*end color*/);

  /* Opera 11.10+ */
  background-image: -o-linear-gradient(top, /*start color*/, /*end color*/);

  -moz-border-radius-topleft: /*pixel radius*/;
  -moz-border-radius-topright:/*pixel radius*/;

  -webkit-border-top-left-radius: /*pixel radius*/;
  -webkit-border-top-right-radius: /*pixel radius*/;

}

Answer 2

私が CSS3 のスタイリングに最も適しているのはCSS3Pleaseです。次のようなクラスを使用します。

.box_round {
  -webkit-border-radius: 3px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
     -moz-border-radius: 3px; /* FF1-3.6 */
          border-radius: 3px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(to bottom, #444444, #999999);
}

---

コメントのグラデーション境界線の質問に基づいて、代わりに box-shadow を使用して境界線をシミュレートできます。

.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 0px 0px 4px 0px #ffffff; /* FF3.5 - 3.6 */
          box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

Answer 3

境界半径ルールを利用する必要があります。それについてはw3cで学ぶことができます。

使用例については、 http://jsbin.com/aresif/edit#html,liveを参照してください。気軽に遊んでみてください。

div.someClassName {
   background-image: url("YourImageGoesHere.jpg");
   background-repeat: repeat-x;
   border: 1px solid red;
   border-radius: 1em 1em 0 0;
}

わずかな最適化

その画像は単純な垂直グラデーションのように見えます。CSS では、background-repeat ルールを使用して background-image を繰り返すことができるため、そのままの幅にする意味はありません。これについてはw3cで読むことができます。まず、その画像を 1px 幅の画像に変更します。これにより、ブラウザーが大きな画像をダウンロードする必要がないため、ページの読み込みがわずかに速くなります。