【问题标题】:How can I add drop shadows to all 4 corners of a box using CSS?如何使用 CSS 为框的所有 4 个角添加阴影?
【发布时间】:2012-12-02 01:49:42
【问题描述】:

我正在尝试仅使用 CSS 将阴影应用于框的所有四个角,因此看起来所有 4 个角都刚刚从页面上抬起,就像在这个网站上一样:http://www.leighannphotography.com/#home/

到目前为止,我只知道如何使用 before 和 after 伪元素和类在 2 个角上添加阴影。有没有办法用 CSS 为所有四个角添加阴影?我不想为阴影使用图像,因为页面上已经有一个滑块,并且我不希望页面加载速度变慢。

【问题讨论】:

    标签: css dropshadow


    【解决方案1】:

    你可以在这里查看我的工作

    http://codepen.io/ImBobby/pen/voEfG

    所以基本上阴影本身已经消耗了 100px 的高度。因此,请确保您将放入 <div class="content"> 的内容的最小高度约为 110 像素

    【讨论】:

    • 好的,所以你的方法是在我要添加阴影的 div 上方和下方创建一个空 div。非常感谢鲍比——这正是我想要的!
    • 不客气。如果您有更多问题,请联系我。请投票给我的答案。
    猜你喜欢
    • 1970-01-01
    • 2011-03-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-29
    相关资源
    最近更新 更多