web-dev-qa-db-ja.com

cssのドロップシャドウ

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全体の不透明度が変わります。

cssopacitydropshadow
10
user952691

不透明度のレベルのドロップシャドウが必要な場合は、シャドウの色に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);
39
Darklg

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

-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/

私が本質的に行ったのは、宣言の最後の値であるシャドウのcolor値を調整することだけでした（#dddddd、または#ddd）。これらは16進値です。その他の例については、こちらをご覧ください。

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

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

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

値#99CCFF質問から は#9CFと同等であり、真ん中の赤（9）、薄緑（C）、および白（F）を示します。これらの値を組み合わせると、表示されていた水色の色合いが得られます。そのため、「影のような」色（灰色の色合い）ではなく色が得られました。

私の色彩理論はここでは少し錆びているので、私が何かを弾いたら誰かが私を訂正します。

2
Jared Farrish