Dreamweaver中的CSS虛擬元素應用

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

下面就展示三個例子：

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

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

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

複製代碼代碼如下:

<!DOCTYPE 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>

<h2>CSS Demo :before, :after, box-shadow</h2>

<p class="myquote">人最寶貴的是生命。生命屬於人只有一次。人的一生應當這樣度過：當回憶往事的時候，他不會因為虛度年華而悔恨，也不會因為碌碌無為而羞愧.</p>

<p class='myquote'>鋼是在烈火裡燃燒、高度冷卻中煉成的，因此它很堅固。我們這一代人也是在鬥爭中和艱苦考驗中鍛鍊出來的，並且學會了在生活中從不灰心喪氣。</p>

</div>

<div>

</div>

</body>

</html>

得到最終如下效果：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More