CSS偽元素 :before, :after, box-shadow應用

2024-07-11 08:31:25

字體：大中小

來源：轉載

供稿：網友

利用CSS偽元素：before 和：after 可以在文檔前后插入內容而不改變文檔原有結構，再配合 box-shadow 可以實現很炫的效果,

下面就展示三個例子：

1、利用 :before 和 :after 添加背景，比如給一段文字前后打引號；

2、利用 :before, :after, box-shadow 實現3D陰影效果;

3、利用 :before, :after, box-shadow 實現照片疊加效果.

復制代碼

代碼如下:
<!DOCTYPE html>
<html lang="zh-cn">
<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>
<div class="shbox sh-down-lr">
<h2>CSS Demo :before, :after, box-shadow</h2>
<p class="myquote">人最寶貴的是生命。生命屬于人只有一次。人的一生應當這樣度過：當回憶往事的時候，他不會因為虛度年華而悔恨，也不會因為碌碌無為而羞愧.</p>
<p class='myquote'>鋼是在烈火里燃燒、高度冷卻中煉成的，因此它很堅固。我們這一代人也是在斗爭中和艱苦考驗中鍛煉出來的，并且學會了在生活中從不灰心喪氣。</p>
</div>
<div class="shbox" style="background:none;">
<div class="stackone">
<img src="http://www.survivalescaperooms.com/uploads/allimg/190324/1T44T202-0.jpg" />
<div>
</div>
</body>
</html>

上一篇：IE下Css圓角沒有的解決方法

下一篇：使用zoom解決IE6 margin無效BUG

發表評論

共有條評論