CSS3のボックスシャドウに透明度を設定することは可能ですか？

ボックスの影に透明度を設定することは可能ですか？

これは私のコードです：

  box-shadow:10px 10px 10px #000;
  -webkit-box-shadow:10px 10px 10px #000;
  -moz-box-shadow: 10px 10px 10px #000;

css

— スティーブン
ソース

186

私はrgba()ここで働くと思います。結局、両方のためのブラウザのサポートbox-shadowとrgba()ほぼ同じです。

/* 50% black box shadow */
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

div {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    background-color: red;
    margin: 10px;
}

div.a {
  box-shadow: 10px 10px 10px #000;
}

div.b {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

<div class="a">100% black shadow</div>
<div class="b">50% black shadow</div>

スニペットを展開

— ボルトクロック
ソース

カラーベースのシャドウは特定の背景でしか機能しないという大きな問題を解決したので、重ねることができない場合に応じてスタイルを変更する必要があります（写真と白の両方をカバーするdiv） bg、その場合、写真の上に影が薄く見える）

— jerclarke 2013

@jeremyclarke同じ問題が発生していましたが、各背景に一意の影の色を定義する必要なく、ボタンの影が複数の背景色で機能する必要がありました。透明な黒は、本当の影のように機能します。

— Clarus Dignus、2015

クロムを変更したい場合、rgba（）は機能しませんinput:-webkit-autofill

— Samuel

いつもChromeですよね。

— BoltClock

@Chris K .:元のボックスシャドウ宣言とは別にこれを行うことはできません。あなたが得ることができる最も近いものは、rgba（）とCSS変数を使用することですが、これは名前付きカラーのサポートがないことを意味し、変数をボックスシャドウ宣言自体に適用する必要があります。background-colorにも同様の制限があります。ここで説明します。また、stackoverflow.com

— questions / 40010597 /…