dw中的css有什么用,Dreamweaver里面CSS伪元素有什么用

经常在修改html代码的时候，看到css有这样的写法 before和after那么他们到底是什么鬼，代码要怎么写，请看下文

大家可以参考下利用CSS伪元素 ：before 和 ：after 可以在文档前后插入内容而不改变文档原有结构，再配合 box-shadow 可以实现很炫的效果,！

下面就展示三个例子：

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

2、利用 :before, :after, box-shadow 实现3D阴影效果;

利用 :before, :after, box-shadow 实现照片叠加效果。

复制代码代码如下:

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);

}