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的不透明度都会改变。

- user952691

---

好奇问一下，阴影怎么可能没有颜色呢？你是指单色（只有黑白）吗？如果不是，你有这种效果的例子吗？ - Pat

你想要一个无色的投影吗？如果它没有颜色，那么它就看不见了，所以...你能更清楚地解释一下你想要什么吗？你现在的代码有什么问题吗？ - David Thomas

opacity 样式属性的作用是影响应用该属性的元素的不透明度，而不是应用于元素的效果。 - Jared Farrish

一个演示的尝试：http://jsfiddle.net/zCTC8/ - Jared Farrish

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);

- Darklg

---

drop-shadow != box-shadow - Streching my competence

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/

我所做的基本上只是调整了阴影的颜色值，这是声明中的最后一个值（#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）。这些值的混合使你看到了浅蓝色阴影，这就是为什么你得到了一种颜色而不是“阴影般”的颜色（灰色阴影）。

我的色彩理论有点生疏，如果我有错，请任何人纠正我。

- Jared Farrish