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

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

本章目标CSS3伪类的基础语法阴影的基础语法transform的妙用

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

曲线阴影

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

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

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

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

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

伪类

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

div:bofore{} 和 div:after{}

我们要在伪类中，一个content:".."这个是不能省的，它表示在伪类中填充的内容，可以为空。

比如：

可以看到，通过before设置的伪类，将其内容放在元素的前面，after则放在元素的内容的后面。

所以我们可以这样理解，两个伪类我们可以看成了两个标签。我们可以给它们分别设置样式。

再回过头来看下上面的效果。我的做法是在伪类上产生阴影，然后将伪类的层级挪到最下面去。

关键点是我们怎么设置伪类的样式。从效果图上来看。它的两端比父级要稍微小一些。然后还有一些圆角效果。

CSS3阴影的活用

基础语法：box-shadow:h-shadow v-shadow blur spreed color inset

其中h-shadow v-shadow 的值可以为负！！！

看效果：

设置z-index:-1;即可将伪类置于最底部。

我给伪类做成了一个小的矩形，然后设置了圆角的效果（水平方向为100px,垂直方向为10px）。最后我们只需要将伪类放在最底部就行了。

翘边阴影

先来看效果图：

这就是最终的效果，这种效果给人的感觉就是图片的两端翘起来了，也是很有立体感。

做法也很简单。同样我是使用的伪类来实现的。这个实现起来就比较有点意思了。

先将伪类制作成一个平行四边形再将其作一个角度的旋转

平行四边形怎么制作？

不要忘了我们在css3中有一个transform，对应的值有一个叫skewX(斜切)。它就可以实现平行四边形的效果。

1）设置基本的伪类样式。

2）添加斜切和旋转效果

 transform: skewX(-12deg) rotate(-4deg);

添加阴影效果：

注意，红色的块一定要比图片小，不然效果也出不来。最后设置伪类的z-index:-1。

我们可以看到，左侧的翘边阴影就已经实现了。

同理，我们可以通过after,利用相同的样式，设置成右侧的翘边阴影效果。

需要注意的是：右的斜切和旋转的角度得和左侧的相反。

transform: skewX(12deg) rotate(4deg);

最后把它挪到最底部去。

这样我们的最终效果就出来啦。

总结

1）CSS3中的伪类的基础语法和妙用。div:before这里我们也可以用两个冒号。其中的content样式不能省，值可以为空。

2）取巧，通过旋转和斜切实现翘边阴影，实现图片的伪3D效果。

3）阴影跟着元素走，我们隐藏元素，露出阴影。

这里是【畅哥聊技术】CSS3专题的系列文章，更多精彩内容持续更新中……

未完待续。。。