CSS偽元素中before和:after以及box-shadow應用是怎樣的

本篇文章給大家分享的是有關CSS偽元素中before和:after以及box-shadow應用是怎樣的，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

10年積累的成都網(wǎng)站制作、成都網(wǎng)站建設、外貿(mào)營銷網(wǎng)站建設經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站設計制作后付款的網(wǎng)站建設流程，更有鎮(zhèn)巴免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

利用CSS偽元素：before 和：after 可以在文檔前后插入內(nèi)容而不改變文檔原有結(jié)構(gòu)，再配合 box-shadow 可以實現(xiàn)很炫的效果,

下面就展示三個例子：

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

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

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

代碼如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>Pseudo Demo</title>
<style>
body{background-color:#ccd3d7;padding:40px;}
h3{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">
<h3>CSS Demo :before, :after, box-shadow</h3>
<p class="myquote">人最寶貴的是生命。生命屬于人只有一次。人的一生應當這樣度過：當回憶往事的時候，他不會因為虛度年華而悔恨，也不會因為碌碌無為而羞愧.</p>
<p class='myquote'>鋼是在烈火里燃燒、高度冷卻中煉成的，因此它很堅固。我們這一代人也是在斗爭中和艱苦考驗中鍛煉出來的，并且學會了在生活中從不灰心喪氣。</p>
</div>
<div class="shbox" >
<div class="stackone">
<img src="http://photos.tuchong.com/392707/f/6512410.jpg" />
<div>
</div>
</body>
</html>

實現(xiàn)效果：
CSS偽元素中before和:after以及box-shadow應用是怎樣的

以上就是CSS偽元素中before和:after以及box-shadow應用是怎樣的，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前題目：CSS偽元素中before和:after以及box-shadow應用是怎樣的
地址分享：http://muchs.cn/article46/ighieg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、Google、域名注冊、網(wǎng)站收錄、建站公司、電子商務

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容