2

要素の上部と下部の線形グラデーションを取得しようとしています。Google で見つかったチュートリアルはいたるところにあるので、ここの誰かが助けてくれることを願っています.

これは HTML と CSS コードです。

CSS:

.content {background: -webkit-gradient(linear, center bottom, center top, from(#f5f5f5), to(#fff));  }
.separator {
    height:1px;
    border-bottom:1px solid #ebebeb;
    }

HTML:

<div class="content">

</div>

<div class="separator"></div>

<div class="content">

</div>

<div class="separator"></div>

<!-- etc... ->

これを生成したい：

ここに画像の説明を入力

もちろん、私が使用した CSS と HTML では、コンテンツの下部にグラデーションが表示されます。最小限の HTML で上部と下部の両方を使用して表示するにはどうすればよいですか?

コンテンツを中に.content入れるので、グラデーションを背景画像にしたいと思います。グラデーションを追加できます.separatorが、グラデーションは次の要素の後ろに表示されません。

背景画像を使用できることは理解していますが、レスポンシブ デザインを使用しているため、そのルートは避けたいと考えています。(はい、レスポンシブ背景画像を使用できることは理解していますが、この CSS のみを使用し、画像は使用したくありません。)

4

1 に答える 1

2

これはあなたに役立つと思います

html

<div class="contentTop">

</div>

<div class="separator"></div>

<div class="contentBottom">

</div>

CSS

.contentTop{
    height:100px;
    background:#ffffff;
    /* For WebKit (Safari, Google Chrome etc) */
    background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1));
    /* For Mozilla/Gecko (Firefox etc) */
    background:-moz-linear-gradient(top, #fff, #f1f1f1);
    /* For Internet Explorer 5.5 - 7 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff, endColorstr=#f1f1f1);
    /* For Internet Explorer 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff, endColorstr=#f1f1f1)";   
}
.contentBottom{
    height:100px;
    background:#f5f5f5;
    /* For WebKit (Safari, Google Chrome etc) */
    background:-webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#fff));
    /* For Mozilla/Gecko (Firefox etc) */
    background:-moz-linear-gradient(top, #f5f5f5, #fff);
    /* For Internet Explorer 5.5 - 7 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5f5f5, endColorstr=#fff);
    /* For Internet Explorer 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5f5f5, endColorstr=#fff)";   
}
.separator{
    border-top:solid 1px #eaeaea;
    height:1px;
    font-size:0;
    line-height:0;
}

ここにjsFiddleファイルがあります

于 2012-11-27T04:32:03.290 に答える