Dreamweaver中的CSS虛擬元素應用

來源:互聯網
上載者:User

 下面就展示三個例子: 

1、利用 :before 和 :after 添加背景,比如給一段文字前後打引號; 

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

利用 :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://photos.tuchong.com/392707/f/6512410.jpg" /> 

<div> 

</div> 

</body> 

</html> 

 

得到最終如下效果:

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。