利用【伪元素】制作逼真的阴影效果

:before和 :after

伪元素将会在内容元素的前后插入额外的元素，:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性。

.one:before {
  position:relative;
  content:open-quote;
}
.one:after {
  position:relative;
  content:close-quote;
}

上面的代码片段将在文字的之前和之后分别添加添加一个引号：

事实上伪元素表现上就像是“真正”的元素，我们能够给它们添加任何样式，比如改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。

.one:before {
  position:relative;
  content:open-quote;
  color:#fce;
  font-size:24px;
}
.one:after {
  position:relative;
  content:close-quote;
  color:#fce;
  font-size:24px;
}

现在我们用它来制作一个逼真的阴影:

<div class="shadow shadow-1">
        <p>text-1</p>
</div>

先来设置好容器的样式：

.shadow {
    width: 350px;
    height: 150px;
    background: #fff;  
    margin: 50px auto;
    position: relative;
}
.shadow p {
    text-align: center;
    line-height: 150px; 
}

之后，用:before 生成左边的阴影：

.shadow-1:before, .shadow-1:after {
    position: absolute;
    top: 130px;
    content: "";
    width: 200px;
    height: 10px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
    z-index: -1;
}
.shadow-1:before {
    left: 5px;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

它们都是绝对定位，使用负z-index来放置到图片后方实现阴影效果。利用rotate旋转投影。
这时，制作右边的阴影就很简单了：

.shadow-1:after {
    right: 5px;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
}

：使用单冒号或者双冒号有差吗？
：无论你使用单冒号还是双冒号，浏览器都将能识别它们。由于IE8只支持单冒号的格式，安全起见如果你想要更广泛的浏览器兼容性那么还是使用单冒号的格式吧！