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

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

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

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

【问题讨论】:

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

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2013-02-09
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2011-07-04
            • 2012-12-07
            • 2012-02-19
            相关资源
            最近更新 更多