如何向 HTML 元素添加“弹出”阴影答案

【问题标题】：How do I add a "popup" shadow to an HTML element如何向 HTML 元素添加“弹出”阴影
【发布时间】：2013-07-03 19:02:07
【问题描述】：

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

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

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

【问题讨论】：

查看this article on box-shadows。
嘿RainbowHat！我将为您将其发送给 SO，但我强烈建议您在问题中添加更多信息，以便在那里有更好的机会。我试着为你稍微清理一下。 “元素样式好吗”是什么意思？你指的是内联样式吗？
内联样式在 99% 的情况下都是错误的。除非你不能，否则总是使用 CSS。
@Chris 如果您不知道正确的术语，有时很难找到非常明显的东西。
@Dominic 我理解并欣赏这一点；这就是为什么我试图变得温柔。但是，在这种情况下，他有所有正确的术语——“shadow”和“css”，甚至是“html”和“shadow”。研究是任何开发人员都必须具备的一项重要技能，检查文档资源也是如此。我希望鼓励 RainbowHat 在未来寻求帮助之前更加积极地研究他的问题。

标签： html css

【解决方案1】：

将此添加到您的 CSS 中

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

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

【讨论】：

【解决方案2】：

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

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

然后使用特定于浏览器的语法复制并粘贴代码。如果您对CSS 不太了解，这可能是一个更安全的选择。

【讨论】：

【解决方案3】：

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

这取决于您的人口统计数据以及您要放置的元素，但很多时候，在 CSS 中称为阴影或框阴影，很容易在 photoshop 中创建，并且可以覆盖您的老年人可能不支持框阴影的浏览器。

【讨论】：

【解决方案4】：

您正在寻找的是一个名为box-shadow 的CSS 3 级属性。 Supported at about 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 了解各种效果。

【讨论】：

【解决方案5】：

整个页面的阴影！！！我的想法！

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

【讨论】：