我們知道，css偽元素包括after,before,first-letter等，通過合理的利用偽元素，我們可以讓我們的結構更簡潔。
通常寫法如p::after{content:' '},其中content內容可以是字符也可以是圖片，例如p:before{content:'尾部'}，p:after { content:url(img.jpg); } ，我們最常用的可能是用來清除浮動或添加一些簡單的元素（如div首尾內容等）。
今天來總結一下其他的幾種用法：
以下代碼全部針對谷歌瀏覽器，如需針對其他瀏覽器，需用兼容性寫法
一.常見消息框
假如我們要實現這樣的效果要怎么做？用圖片嗎？no！
我們知道當設置元素寬高都為0px時，設置4條border為不同顏色，將會是這個樣子
所以我們可以利用這個特性來制作上面的內容：
1 <style>
2 div{width:300px;
3 background-color:rgba(0,0,0,0.7);
4 color:#fff;
5 font-family:'Microsoft YaHei';
6 text-align:center;
7 padding:5px;
8 margin:100px auto;
9 position:relative
10 }
11 div::before{content:' ';
12 width:0px;
13 height:0px;
14 position:absolute;
15 left:-12px;
16 top:50%;
17 -webkit-transform:translate(0px,-50%);
18 border:6px solid rgba(0,0,0,0.7);
19 border-color:transparent rgba(0,0,0,0.7) transparent transparent
20 }
21 </style>
22
23 <div>我是內容我是內容我是內容</div>
注意，此時偽類content:' ',而非content:'',而且偽類4條邊必須寬度相同，而且其他三條邊為transparent才可以;對於-webkit-transform設置在之前的文章中已經講過，可以通過設置定位元素left,top值為50%,translate(-50%,-50%) 來使任意寬高的元素居中。
ps：當然我們也可以通過定位疊加來實現有邊框有底色的小三角。
二.陰影
先看下圖，通過偽類，我們可以實現如下效果，而不用再用圖片
我們來看代碼：
1 <style> 2 body{background-color:#ebebeb} 3 div.outer{width:400px; 4 height:250px; 5 padding:5px; 6 margin:100px auto; 7 position:relative; 8 } 9 div.child{ 10 position:absolute; 11 top:0px; 12 left:0px; 13 right:0px; 14 bottom:0px; 15 background-color:#fff; 16 color:#000; 17 line-height:250px; 18 font-family:'Microsoft YaHei'; 19 text-align:center; 20 z-index:2 21 } 22 div.outer::before,div.outer::after{content:''; 23 z-index:1; 24 width:50%; 25 height:3px; 26 position:absolute; 27 left:10px; 28 bottom:7px; 29 background-color:transparent; 30 box-shadow:5px 5px 10px rgba(0,0,0,0.5); 31 -webkit-transform:rotate(-3deg); 32 33 } 34 div.outer::after{ 35 left:auto; 36 right:10px; 37 -webkit-transform:rotate(3deg) 38 } 39 </style> 40 <div class='outer'> 41 <div class='child '> 42 我是內容我是內容我是內容 43 </div> 44 </div>
通過設置before，after不同位置，不同旋轉角度，可以實現現在網絡很流行的陰影效果，同時要保證偽類的顏色及z-index。有了這種方法 我們就可以擴展出各種各樣的陰影效果，同理照片疊加效果也是類似，自己動手試驗一下吧。