首页 > web前端 > css教程 > 关于CSS伪元素的应用

关于CSS伪元素的应用

不言
发布: 2018-06-20 13:51:12
原创
1556 人浏览过

利用CSS伪元素 :before 和 :after 可以在文档前后插入内容而不改变文档原有结构,下面有个不错的示例,大家可以参考下

利用CSS伪元素 :before 和 :after 可以在文档前后插入内容而不改变文档原有结构,再配合 box-shadow 可以实现很炫的效果,
下面就展示三个例子:
1、利用 :before 和 :after 添加背景,比如给一段文字前后打引号;
2、利用 :before, :after, box-shadow 实现3D阴影效果;
3、利用 :before, :after, box-shadow 实现照片叠加效果.

<!DOCTYPE html> 
<html> 
<head> 
<title>Pseudo Demo</title> 
<style> 
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); 
} 
</style> 
</head> 
<body> 
<p class="shbox sh-down-lr"> 
<h2>CSS Demo :before, :after, box-shadow</h2> 
<p>人最宝贵的是生命。生命属于人只有一次。人的一生应当这样度过:当回忆往事的时候,他不会因为虚度年华而悔恨,也不会因为碌碌无为而羞愧.</p> 
<p>钢是在烈火里燃烧、高度冷却中炼成的,因此它很坚固。我们这一代人也是在斗争中和艰苦考验中锻炼出来的,并且学会了在生活中从不灰心丧气。</p> 
</p> 
<p style="background:none;"> 
<p> 
<img src="http://photos.tuchong.com/392707/f/6512410.jpg" /> 
<p> 
</p> 
</body> 
</html>
登录后复制

实现效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

关于bootstrap3.0的栅格系统原理

关于css如何控制背景的分享

如何使用CSS控制前端图片HTTP请求

以上是关于CSS伪元素的应用的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板