长方体-同一div上的内侧和外侧的阴影
长方体-同一div上的内侧和外侧的阴影
提问于 2011-11-01 18:42:11
我不能在同一个div中同时拥有内部和外部的长方体阴影吗？我试过了，但不起作用
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-11-01 18:50:39
你需要使用逗号来分隔两个阴影：http://jsfiddle.net/gryzzly/CWuw8/3/你还需要添加特定于浏览器的前缀，以便在支持它的任何地方都能工作：
div {
-webkit-box-shadow:
10px 10px 10px #000,
inset 0 0 10px #000;
-moz-box-shadow:
10px 10px 10px #000,
inset 0 0 10px #000;
-o-box-shadow:
10px 10px 10px #000,
inset 0 0 10px #000;
box-shadow:
10px 10px 10px #000,
inset 0 0 10px #000;
}此外，您还必须为阴影指定颜色才能使其可见。
Stack Overflow用户
发布于 2011-11-01 18:50:41
使用CSS3，你可以通过逗号分隔多个方框阴影，例如：
box-shadow: 10px 10px 10px, 0 0 10px inset;你想要多少就有多少。
Stack Overflow用户
发布于 2011-11-01 18:54:35
添加了一个可运行的代码片段：
div {
top: 100px;
position: absolute;
left: 100px;
height: 100px;
width: 100px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .5),
0 0 10px rgba(255, 0, 0, .5) inset;
border-radius: 5px;
background: white;
}
body {
background: #fff
}<div></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7965278
复制相关文章
相似问题