1. ホーム
  2. css

[解決済み] CSS3のbox-shadowに透明度を設定することは可能ですか?

2022-05-13 17:39:22

質問

ボックスシャドウに透明度を設定することは可能でしょうか?

これは私のコードです。

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

どのように解決するのですか?

おそらく 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>