带有 css 的阴影

Question

我想给我的 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 的不透明度发生了变化。

Answer 1

如果您想要具有一定程度不透明度的阴影，您应该使用 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);

Answer 2

虽然你的问题最终有点不透明（双关语），但以下内容是否符合你的预期？

-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

）。这些是十六进制值。请参阅此处了解更多示例：

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

#ddd

/

#dddddd

表示浅灰色；

#eee

较浅，

#ccc

较深，

#fff

为白色，

#000

为黑色。值

#000

代表

RGB

，有效值为0-9A-F（暗->亮），因此：

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

您的问题

中的值

#99CCFF相当于

#9CF

，它给出中间红色（9）、浅绿色（C）和白色（F）。这些值的混合为您提供了您所看到的浅蓝色阴影，这就是为什么您得到的是颜色而不是“类似阴影”的颜色（灰色阴影）。

我的色彩理论有点生疏，所以如果我有什么错误，请大家纠正我。

Answer 3

我找到了一种“过滤”方法。

.my-box {
  filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.4));
}