Question

我试图将这个阴影放到盒子的内部和底部，但是我无法让它工作。有没有人对如何做到这一点有很好的解释，可以帮助我？

-moz-box-shadow:0 5px 5px rgba(128,128,128,0.1);
-webkit-box-shadow: 0 5px 5px rgba(128,128,128,0.1);
box-shadow: 0 5px 5px rgba(128,128,128,0.1);

Answer 1

这样的事可能吗？

-moz-box-shadow: inset -5px -5px 5px 5px rgba(128,128,128,0.1);
-webkit-box-shadow: inset -5px -5px 5px 5px rgba(128,128,128,0.1);
box-shadow: inset -5px -5px 5px 5px rgba(128,128,128,0.1);

Answer 2

你可以这样做吗？它虽然在左侧和右侧留下了一个微小的间隙......

-webkit-box-shadow: inset -1px 3px 3px rgba(255,255,255,1),
                    inset 1px 3px 3px rgba(255,255,255,1),
                    inset 0px -3px 3px rgba(0,0,0,0.3);
   -moz-box-shadow: inset -1px 3px 3px rgba(255,255,255,1),
                    inset 1px 3px 3px rgba(255,255,255,1),
                    inset 0px -3px 3px rgba(0,0,0,0.3);
        box-shadow: inset -1px 3px 3px rgba(255,255,255,1),
                    inset 1px 3px 3px rgba(255,255,255,1),
                    inset 0px -3px 3px rgba(0,0,0,0.3);

或者，您可以尝试这样的事情（使用多个常规框阴影模拟插图）：

-webkit-box-shadow:     0 1px 3px rgba(255,255,255,0.5),
                        0 2px 3px rgba(255,255,255,0.5),
                        0 3px 0px rgba(0,0,0,0.3);
   -moz-box-shadow:     0 1px 3px rgba(255,255,255,0.5),
                        0 2px 3px rgba(255,255,255,0.5),
                        0 3px 0px rgba(0,0,0,0.3);
        box-shadow:     0 1px 3px rgba(255,255,255,0.5),
                        0 2px 3px rgba(255,255,255,0.5),
                        0 3px 0px rgba(0,0,0,0.3);

不幸的是，这也有消除阴影的白色光芒。

CSS Shadow在对面的地方

2 个答案: