CSS3 框阴影 : both, 外部和内部

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

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.

所以，对你来说:

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

参见: http://jsfiddle.net/JzsAh/