html - 如何向 HTML 元素添加“弹出”阴影

Question

如何给我的带有阴影的弹出效果？我经常在不同的网站上看到它（例如https://www.smartrecruiters.com）在内容持有者的边缘，它具有这种暗影弹出效果。

它有具体的名称吗？我该怎么做才能在身体两侧产生这种效果？

元素样式可以吗，还是建议所有样式都在 CSS 中？

Answer 1

将此添加到您的CSS

yourClass{box-shadow:2px 3px 5px #999;}

您可以使用值和颜色代码来获得您想要的结果

Answer 2

此外，如果您对调整代码没有信心，您可以使用各种免费的 box-shadow 代码生成器之一，这是我使用的一个：

http://css3gen.com/box-shadow/

然后复制并粘贴代码，以及特定于浏览器的语法。如果您不太了解CSS.

Answer 3

您正在寻找的是一个名为box-shadow的 CSS 3 级属性。支持率约为 83%。

iOS 上的 Safari（包括 6）不能将 box-shadow 应用于输入元素。（解决方案：添加 -webkit-appearance: none; 到输入元素。）

Android 2.3 默认浏览器似乎不支持 0px 值。例如 -webkit-box-shadow: 5px 1px 0px #f04e29; 不起作用，但是 -webkit-box-shadow: 5px 1px 1px #f04e29 可以！

这是您示例中的 css，您可以复制粘贴。

.baseWrapper {
    /* not relevant, just copied */
    width:960px;min-height:200px;margin:-5px auto 0;border:0;background:#fff;
    -webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;
    /* Le box-shadow */
    -webkit-box-shadow:2px 2px 6px 1px #d2d2d2;
    -moz-box-shadow:2px 2px 6px 1px #d2d2d2;
    box-shadow:2px 2px 6px 1px #d2d2d2;
    /* some Microsoft filter could be missing here .. */
    }

如果有兴趣查看http://tests.themasta.com/blogstuff/boxshadowdemo.html了解各种效果。

Answer 4

如果您的网站将在 ie 8 或 back 等浏览器上普遍使用，这比您想象的更常见，您应该在 photoshop 中创建图像背景，添加阴影，并将其保存为 .png 24。

这取决于您的人口统计数据和您要放置的元素，但很多时候，在 CSS 中调用的阴影或框阴影很容易在 photoshop 中创建，并且适用于旧版浏览器，其中框可能不支持阴影。

Answer 5

整页有阴影！！！我的想法！

box-shadow: 0 0 0 100000px rgba(0,0,0,.2);