如何使用伪元素修复 css3 阴影答案

【问题标题】：How to fix css3 shadow with pseudo-elements如何使用伪元素修复 css3 阴影
【发布时间】：2011-08-06 21:50:50
【问题描述】：

使用:before 和:after 创建的阴影位于父div 之下。我该如何解决？父 div 的影子工作正常。

CSS：

article {
    display: block;
    position: relative;
    width: 90%;
    background: #ccc;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 1.5em;
    color: rgba(0,0,0, .8);
    text-shadow: 0 1px 0 #fff;
    line-height: 1.5;
    text-align: center;
    display: block;
    margin: 20em auto;
}


article:before, article:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);   
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-3deg);    
    -moz-transform: rotate(-3deg);   
    -o-transform: rotate(-3deg);
}

article:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    right: 10px;
    left: auto;
}

HTML：

<body>
    <div>
        <table>
            <tr>
                <td>
                    <div>this div has also a nice shadow effect (works), but created with another div by z-index:-1;
                        <article>
                            <p>this will have a nice shadow effect(doesnt work)</p>
                        </article>
                    </div>
                    ...

【问题讨论】：

请提供屏幕截图或指向实时页面的链接，以便我们查看问题。

标签： css pseudo-element

【解决方案1】：

JS fiddle of the posted code, cleaned up a bit.

:before 和 :after 伪选择器允许您将 content 添加到元素的文本节点。 您不能使用这些伪选择器将其他元素或节点添加到 DOM 中。

我不确定您要设置什么样的内容，因为您要附加一个空白字符串，但现在您正尝试将 box shadow 添加到 text。

此外，您的 CSS 中的缩进完全乱码，并且您有一些恶意 HTML 标签。您应该花 12 秒时间查看您发布的代码，以便我们花时间阅读，以推断和帮助您消除误解；如果您在您的问题上花时间尊重我们的时间，您会得到更好的帮助。

【讨论】：

对不起。我添加了一张图片它应该是什么样子以及它如何不
@coreyward... 你的小提琴在 Chrome 中对我不起作用，也就是说，任何地方都没有阴影

【解决方案2】：

您的代码对我来说很好用，请参阅 http://jsfiddle.net/NAEmW/2/ 。在 FF 和 Chrome 中测试都可以，当然 IE

可以解决这个问题的一个原因是 CSS 重置，所以要小心什么被清零。

【讨论】：