带有 CSS 的阴影答案

【问题标题】：Dropshadow with css带有 CSS 的阴影
【发布时间】：2011-11-29 10:18:39
【问题描述】：

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

【问题讨论】：

出于好奇，投影怎么可能没有颜色？您的意思是单色（仅黑色/白色）？不是，有效果的例子吗？
你想要一个非彩色的投影？如果它没有颜色，它就不会被看到，所以……你能解释得更清楚一点，你想要什么吗？你当前的代码有什么问题？
opacity 样式属性旨在影响应用它的元素的不透明度，而不是应用到元素的效果。
尝试演示：jsfiddle.net/zCTC8

标签： css opacity dropshadow

【解决方案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);

【讨论】：

drop-shadow != box-shadow

【解决方案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)

值#99CCFFfrom your question 等价于#9CF，它给出了中间红色 (9)、浅绿色 (C) 和白色 (F)。这些值的混合为您提供了您所看到的浅蓝色阴影，这就是您获得颜色而不是“类似阴影”的颜色（灰色阴影）的原因。

我的色彩理论在这里有点生疏，所以如果我弄错了什么，任何人都可以纠正我。

【讨论】：