前端实现3d效果_CSS3专题(七)—这是一个利用阴影实现的伪3D效果

欢迎来到我的CSS3专题系列文章，更多精彩内容持续更新中，欢迎关注 ：)

CSS3各种属性的设置本身难度不大，最重要的是我们要学会利用它的特性去制作出一些逼真的效果。

本章目标

1. CSS3伪类的基础语法
2. 阴影的基础语法
3. transform的妙用

先来看下我们今天要实现的第一个效果吧

曲线阴影

从效果图来看，我们放了一个盒子。底部有一个曲线的阴影。整体效果给用户一个很好的立体感。

刚开始接触CSS3的童鞋可以想到，布局是在一个div里面放两个span，然后通过span标签去生成我们的阴影。

NONONO，如果这是真实的项目开发，这样做即使你做出来了，也会被骂死的。

为什么呢？做前端，我们的目标并不是只是把效果实现就完事。

在这个示例中，显然，我们不需要添加额外的标签，我们可以通过css3中的伪类来实现

伪类

在css3中，我们可以给元素添加伪类，语法：

div:bofore{} 和 div:after{}

我们要在伪类中，一个conte