关于CSS:是否可以在CSS3盒子阴影中设置透明度?


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

是否可以在盒子阴影上设置透明度?

这是我的代码:

1
2
3
  box-shadow:10px 10px 10px #000;
  -webkit-box-shadow:10px 10px 10px #000;
  -moz-box-shadow: 10px 10px 10px #000;

我想rgba()可以在这里工作。毕竟,浏览器对box-shadowrgba()的支持大致相同。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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);
}

1
2
100% black shadow
50% black shadow