CSS3框阴影:两者,外和内

前端之家收集整理的这篇文章主要介绍了CSS3框阴影:两者,外和内前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否有可能创建一个外部阴影的3D效果和内插入发光?我有一个石灰绿色背景的div,在一个蓝色的div。到目前为止,我有以下:
.greendiv{
   background:darkgreen;
   Box-shadow: Box-shadow: 10px -7px 15px darkgray;
   Box-shadow: lightgreen 0px 0px 3px inset;
}

实际的颜色是#ffffff格式。看来第二个声明取消了第一个声明。有没有解决的办法?

解决方法

你只需声明一次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/

猜你在找的CSS相关文章