11

div に透明なドロップシャドウを追加したいと考えています。コンテナーがあり、その背後にドロップシャドウを配置したいと考えています。ドロップシャドウに色を付けたくありません。これは私がこれまでに持っているものです:

.content_right1{

    background:#fff;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
     border-radius:10px;

    -moz-box-shadow: 5px 5px 5px #99CCFF;
    -webkit-box-shadow: 5px 5px 5px #99CCFF ;
     box-shadow: 5px 5px 5px #99CCFF;

    /* other styles of the class */
    width:380px;
    float:left;

    margin-left:3px;
    padding:15px;

    min-height:450px;
    margin-left:15px;
}

不透明度を追加したいのですが、div全体の不透明度を変更すると。

4

2 に答える 2

41

不透明度のあるドロップシャドウが必要な場合は、影の色に rgba() を使用する必要があります。

http://css-tricks.com/2151-rgba-browser-support/

編集：

-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
box-shadow:5px 5px 5px rgba(0,0,0,0.3);
于 2011-10-02T16:17:57.057 に答える
2

あなたの質問は最終的には少し不透明ですが（しゃれが意図されています）、次のことはあなたが期待していることをしますか?

-moz-box-shadow: 5px 5px 5px #dddddd;
-webkit-box-shadow: 5px 5px 5px #dddddd;
box-shadow: 5px 5px 5px #dddddd;

http://jsfiddle.net/zCTC8/2/

私が本質的に行ったのは、宣言の最後の値である影の色の#dddddd値を調整することだけでした ( 、または#ddd)。これらは 16 進値です。その他の例については、こちらを参照してください。

http://html-color-codes.com/

#ddd/#ddddddは薄い灰色を表します。#eee明るく、#ccc暗く、#fff白く、#000黒く。値#000は を表しRGB、有効な値は 0-9A-F (暗い->明るい) であるため、次のようになります。

#f00 = red (R)
#0f0 = green (G)
#00f = blue (B)

#99CCFF あなたの質問の値は に相当し#9CF、中間の赤 (9)、薄緑 (C)、および白 (F) が得られます。これらの値を組み合わせると、表示されていた水色の色合いが得られます。これが、「影のような」色 (灰色の色合い) ではなく、色を取得していた理由です。

ここでの私の色理論は少しさびているので、何かをフラブした場合は誰かが私を修正してください.

于 2011-10-02T15:00:17.970 に答える