利用css伪元素 ：before 和 ：after 可以在文档前后插入内容而不改变文档原有结构，下面有个不错的示例，大家可以参考下
利用CSS伪元素 ：before 和 ：after 可以在文档前后插入内容而不改变文档原有结构，再配合 box-shadow 可以实现很炫的效果,
下面就展示三个例子：
1、利用 :before 和 :after 添加背景，比如给一段文字前后打引号；
2、利用 :before, :after, box-shadow 实现3D阴影效果;
3、利用 :before, :after, box-shadow 实现照片叠加效果.
Pseudo Demo body{background-color:#ccd3d7;padding:40px;} h2{display:block;border-bottom:1px solid #ddd;padding:15px;} p.myquote{padding:1em;font-size:16px;margin:8px 1em;position:relative;color:blue;line-height:1.7em;} p.myquote:before,p.myquote:after{font-size:40px;position:absolute;padding:0;margin:0;color:green;} p.myquote:hover:before,p.myquote:hover:after{color:red;font-size:50px;} p.myquote:before{content:"“";left:0;left:-10px;} p.myquote:after{content:"”";padding-left:15px;bottom:4px;} .shbox{ background:#fff; padding:10px; width:90%; margin:40px auto; height:auto; margin:40px auto; } .sh-down-lr{position:relative;} .sh-down-lr:before,.sh-down-lr:after{ z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .sh-down-lr:after{ -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right:10px; left:auto; } .stackone { border: 6px solid #fff; width: 400px; height:225px; margin: 50px; position: relative; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); } .stackone img{width:100%;heigth:100%;} .stackone:before,.stackone:after { content: ""; width: 400px; height:225px; background: #aaa; border: 6px solid #fff; position:absolute; z-index:-1; top:0; left:-10px; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } .stackone:after { top:5px; left:0; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); }
CSS Demo :before, :after, box-shadow
人最宝贵的是生命。生命属于人只有一次。人的一生应当这样度过：当回忆往事的时候，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞愧.
钢是在烈火里燃烧、高度冷却中炼成的，因此它很坚固。我们这一代人也是在斗争中和艰苦考验中锻炼出来的，并且学会了在生活中从不灰心丧气。
实现效果： 
立即学习“前端免费学习笔记（深入）”；
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于bootstrap3.0的栅格系统原理
关于css如何控制背景的分享
如何使用CSS控制前端图片HTTP请求
以上就是关于CSS伪元素的应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610264.html
微信扫一扫 
支付宝扫一扫 
