开发者

Is it possible to set transparency in CSS3 box-shadow?

开发者 https://www.devze.com 2023-02-20 10:51 出处:网络
Is it possible to set transparency on the box shadow? This is my code: box-shadow:10px 10px 10px #000; -webkit-box-shadow:10px开发者_JS百科 10px 10px #000;

Is it possible to set transparency on the box shadow?

This is my code:

  box-shadow:10px 10px 10px #000;
  -webkit-box-shadow:10px开发者_JS百科 10px 10px #000;
  -moz-box-shadow: 10px 10px 10px #000;


I suppose rgba() would work here. After all, browser support for both box-shadow and rgba() is roughly the same.

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

0

精彩评论

暂无评论...
验证码 换一张
取 消