0

プロジェクトの 1 つで複数のグラデーションを使用しようとしています。私の目的は、section要素の境界からフェード シャドウを持つことです。

さまざまなソースから、これは私が今まで思いついたものです

.section2 {
    border-radius: 10px;
    border: 2px solid #E1E1E1;

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%), -moz-linear-gradient(left, #E1E1E1 0%, #FFFFFF 5%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left, right bottom, color-stop(0, #E1E1E1), color-stop(.05, #FFFFFF));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(right, #FFFFFF 95%, #E1E1E1 100%), -webkit-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%);
}

しかし問題は、これが最初のグラデーションのみを表示していることです。その後のグラデーションは無視されます。

ここで実際にこれを見ることができます。

4

3 に答える 3

1

box-shadowあなたがやりたいことにはるかに適しています。勾配アプローチよりもシンプルで、予測可能で、すっきりしています。

必要なのは単一のプロパティだけです。値をいじって、最高の結果を達成してください (やみくもにプレイしないように、値の動作をよく読んでください)。これは私がやったことであり、グラデーションと同様の効果を実現します:

box-shadow: inset 0 0 30px 10px #E1E1E1;

デモ: http://jsfiddle.net/EDcGP/6/

于 2012-06-08T13:35:28.723 に答える
0 
/* Mozilla Firefox */
    background-image: -moz-linear-gradient(left, #FF0000 95%, #E1E1E1 100%);
/* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%);

Firefox と Chrome で上記の css を試してみましたが、どちらも機能します。Safariで試すことができませんでした。

2 番目のグラデーション スタイルを削除する必要があります。グラデーションが 1 つあれば機能します。

于 2012-06-06T03:31:18.773 に答える
0

以下に示すように、背景色とともに不透明度を使用することでほぼ解決しました。

background-image: -moz-linear-gradient(to right, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to left, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to bottom, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to top, #E1E1E1 0, rgba(255, 255, 255, 0) 50px);

実際のサンプルはこちらにあります。

于 2012-06-07T10:36:28.453 に答える