CSS 阴影位于相反的位置

发布于 2025-01-04 10:45:49 字数 233 浏览 1 评论 0原文

我试图让这个阴影进入盒子的内部和底部，但我无法让它工作。有没有人对如何执行此操作有很好的解释并可以帮助我？

-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);

原文

Im trying to get this shadow to the inner and on the bottom of my box, but I can't get it to work. Is there anyone who have a good explanation on how to do this and can help me out?

-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);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请叫√我孤独 2025-01-11 10:45:49

也许是这样的？

-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);

Something like that maybe?

-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);

回复收藏 0 原文

乞讨 2025-01-11 10:45:49

你能做这样的事吗？不过，它在左侧和右侧留下了一个微小的间隙...

-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);

不幸的是，这也有一个警告，即来自取消阴影。

Could you do something like this? It leaves a tiny gap on the left and right hand sides though...

-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);

Or alternatively, you could try something like this (simulating the inset with multiple regular box-shadows):

-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);

Unfortunately, this also has the caveat of a white glow from the cancelling shadows.

回复收藏 0 原文

~没有更多了~