如何使用伪元素修复css3阴影_Css_Pseudo Element

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

css

如何使用伪元素修复css3阴影,css,pseudo-element,Css,Pseudo Element,使用：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);

使用

：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;
}

<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>
                    ...

HTML:

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;
}

<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>
                    ...


这个div也有一个很好的阴影效果（工作），但是通过z-index使用另一个div创建：-1；
这将有一个很好的阴影效果（不起作用）
...

：before

和

：after

伪选择器允许您向元素的文本节点添加内容不能使用这些伪选择器向DOM中添加其他元素或节点。

我不确定您想要设置什么内容的样式，因为您正在添加一个空白字符串，但现在您正在尝试将框阴影添加到文本中

此外，CSS中的缩进完全混乱，并且有一些恶意HTML标记。你应该花12秒钟来阅读你发布的代码，以便我们花时间阅读，从而推断并帮助消除误解；如果您尊重我们的时间，将时间花在您的问题上，您将得到更好的帮助。
您的代码对我来说运行良好，请参阅。
FF和Chrome都测试正常，当然请提供一个屏幕截图或一个指向实时页面的链接，以便我们可以看到问题。抱歉。我添加了一个图像，它应该是什么样子的，它是什么样子的doesnt@coreyward... 你的小提琴在Chrome中对我不起作用，这意味着，任何地方都没有阴影