如何为HTML元素添加“弹出”阴影

Question

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

是否有特定的名称？我该怎么做才能在身体两侧产生这种效果？

元素样式是否正常或建议所有样式都在CSS中？

Answer 1

将此添加到您的css

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

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

Answer 2

此外，如果你不完全有信心调整代码，你可以使用各种免费的盒子阴影代码生成器之一，这是我使用的：

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

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

Answer 3

如果你的网站常用于8或者后面的浏览器，这比你想象的更常见，你应该在photoshop中创建一个图像背景，添加一个drop shaddow，并将其另存为。 png 24。

这取决于你的人口统计，以及你所使用的元素，但很多时候，在CSS中调用的阴影阴影或框阴影都可以在photoshop中轻松创建，并且可以覆盖旧版本可能不支持框阴影的浏览器。

Answer 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了解各种影响。

Answer 5

整个页面上的阴影！！！ 我的主意！

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