欢迎来到我的CSS3专题系列文章,更多精彩内容持续更新中,欢迎关注 :)
CSS3各种属性的设置本身难度不大,最重要的是我们要学会利用它的特性去制作出一些逼真的效果。
本章目标
- CSS3伪类的基础语法
- 阴影的基础语法
- transform的妙用
先来看下我们今天要实现的第一个效果吧
![9f984344c636672fc7899e8fba715462.png](https://i-blog.csdnimg.cn/blog_migrate/ca4708567ca7b48fc52fa4564db6e2c5.jpeg)
曲线阴影
从效果图来看,我们放了一个盒子。底部有一个曲线的阴影。整体效果给用户一个很好的立体感。
刚开始接触CSS3的童鞋可以想到,布局是在一个div里面放两个span,然后通过span标签去生成我们的阴影。
NONONO,如果这是真实的项目开发,这样做即使你做出来了,也会被骂死的。
为什么呢?做前端,我们的目标并不是只是把效果实现就完事。
在这个示例中,显然,我们不需要添加额外的标签,我们可以通过css3中的伪类来实现
伪类
在css3中,我们可以给元素添加伪类,语法:
div:bofore{} 和 div:after{}
我们要在伪类中,一个conte