带 css 的阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7626963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dropshadow with css
提问by user952691
I want to add a transparent dropshadow to my div. I have a container, and behind it I want to place a dropshadow. I don't want the dropshadow to have a color. This is what I have so far:
我想为我的 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;
}
I want to add the opacity, but when I do the opacity of the whole div changes.
我想添加不透明度，但是当我做整个 div 的不透明度变化时。
回答by Darklg
If you want a dropshadow with a level of opacity, you should use rgba() for its shadow color :
如果你想要一个不透明度级别的阴影，你应该使用 rgba() 作为它的阴影颜色：
http://css-tricks.com/2151-rgba-browser-support/
http://css-tricks.com/2151-rgba-browser-support/
edit:
编辑：
-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);
回答by Jared Farrish
While your question is ultimately a little opaque (pun intended), does the following do what you are expecting?
虽然您的问题最终有点不透明（双关语），但以下内容是否符合您的预期？
-moz-box-shadow: 5px 5px 5px #dddddd;
-webkit-box-shadow: 5px 5px 5px #dddddd;
box-shadow: 5px 5px 5px #dddddd;
All I essentially did was adjust the colorvalue of the shadow, which is the last value in the declaration (#dddddd, or #ddd). These are hex values. See here for more examples:
我基本上所做的只是调整阴影的颜色值，这是声明中的最后一个值 ( #dddddd, 或#ddd)。这些是十六进制值。有关更多示例，请参见此处：
#ddd/#ddddddrepresents a light grey color; #eeeis lighter, #cccis darker, #fffis white, and #000is black. The value #000represents RGB, with valid values of 0-9A-F (dark->light), so that:
#ddd/#dddddd代表浅灰色；#eee更#ccc亮，更暗，#fff白色，#000黑色。该值#000代表RGB，有效值为 0-9A-F（暗->亮），因此：
#f00 = red (R)
#0f0 = green (G)
#00f = blue (B)
The value #99CCFFfrom your questionis equivalent to #9CF, which gives a middle red (9), a light green (C), and white (F). The mix of these values gives you the light blue shade you were seeing, which is why you were getting a color instead of a "shadow-like" color (gray shade).
#99CCFF您问题中的值相当于#9CF，它给出了中间红色 (9)、浅绿色 (C) 和白色 (F)。这些值的混合为您提供了您所看到的浅蓝色阴影，这就是为什么您得到一种颜色而不是“类似阴影”的颜色（灰色阴影）。
My color theory is a little rusty here, so anyone correct me if I've flubbed something.
我的色彩理论在这里有点生疏，所以如果我搞砸了什么，任何人都可以纠正我。
