CSS3框阴影：外部和内部

Question

是否可以为3D效果创建外部阴影和内部发光？我有一个浅绿色背景的div，它位于蓝色div之上。到目前为止，我有以下内容：

.greendiv{
   background:darkgreen;
   box-shadow: box-shadow: 10px -7px 15px darkgray;
   box-shadow: lightgreen 0px 0px 3px inset;
}

实际颜色为#ffffff格式。似乎第二个声明取消了第一个声明。有办法解决这个问题吗？

Answer 1

您只需声明box-shadow一次，并使用其中的两个版本，用逗号分隔：

http://www.w3.org/TR/css3-background/#the-box-shadow

  

'box-shadow'属性会在框中附加一个或多个阴影。该属性是以逗号分隔的阴影列表，每个阴影由2-4个长度值，可选颜色和可选的“inset”关键字指定。

所以，对你来说：

.greendiv {
    background: darkgreen;
    box-shadow: 10px -7px 15px darkgray, lightgreen 0px 0px 3px inset;
}

请参阅： http://jsfiddle.net/JzsAh/