CSS CSS3 框阴影：内外兼修
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6048899/
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
CSS3 box shadow: both, outter and inner
提问by frenchie
Is it possible to create both an outer shadow for a 3D effect and an inner inset glow? I have a div with a lime green background that's on top of a blue div. So far, I have the following:
是否可以同时为 3D 效果创建外部阴影和内部嵌入发光？我有一个带有石灰绿色背景的 div，它位于蓝色 div 的顶部。到目前为止，我有以下几点：
.greendiv{
background:darkgreen;
box-shadow: box-shadow: 10px -7px 15px darkgray;
box-shadow: lightgreen 0px 0px 3px inset;
}
The actual colors are in #ffffff format. It seems that the second declaration cancels the first one. Is there a way around this?
实际颜色采用#ffffff 格式。似乎第二个声明取消了第一个声明。有没有解决的办法？
回答by thirtydot
You simply declare box-shadowonce, and use both versions inside, separated with a comma:
您只需声明box-shadow一次，并在其中使用两个版本，用逗号分隔：
http://www.w3.org/TR/css3-background/#the-box-shadow
http://www.w3.org/TR/css3-background/#the-box-shadow
The ‘box-shadow' property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional ‘inset' keyword.
'box-shadow' 属性将一个或多个阴影附加到盒子上。该属性是一个以逗号分隔的阴影列表，每个阴影由 2-4 个长度值、一个可选颜色和一个可选的“插入”关键字指定。
So, for you:
所以，对你来说：
.greendiv {
background: darkgreen;
box-shadow: 10px -7px 15px darkgray, lightgreen 0px 0px 3px inset;
}
