本文地址http://www.cnblogs.com/Bond/p/3972854.html?
最近一直做移動端，沒和IE6打交道了，瞬間感覺世界變美好了。移動端雖然還是各種坑，但是比起修復IE6那還是輕松多了，移動端很多效果可以用CSS3來做，感覺一切都和諧的。
:before :after?也許大家認識它是從清楚浮動開始的。它在我眼里就是兩個標簽，而且非常實用好用，常用它你會發現，你可以省去很多冗余的標簽。也許以前你用的是三個標簽，而現在你只需要一個標簽就能搞定。
總結下最近是如何實用它兩的。
關閉按鈕，這個只需一個標簽，完全用css3實現，×用：before 和:after
.close{position: absolute;width: 30px;height: 30px;background-color: rgba(0, 0, 0, .5);border-radius: 50%;right: -10px;top: -15px; } .closee:after, .close:before {content: "";background-color: #FFFFFF;height: 2px;width: 22px;border-radius: 2px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;transform: rotate(45deg);-webkit-transform: rotate(45deg); } .close:before {transform: rotate(-45deg);-webkit-transform: rotate(-45deg); }
?
這種和上面的類似，直接一個標簽，里面用:before和after來搞定
?
這種可以用:before和:after來做，不過相對就麻煩，但是用:before和:after可以控制兩條線之間的角度。 如果想簡單，假設兩條線之間的角度是90，那么可以直接用border加旋轉，或者是用陰影加上旋轉就可以搞定。
/*→箭頭 》》》》》》 用border來做，用陰影方法類似*/.r:after {position: absolute;right: -10px;top: 0;bottom: 0;margin: auto 0;content: "";display: block;height: 6px;width: 6px;border-top: 2px solid #c6c6c6;border-right: 2px solid #c6c6c6;transform: rotate(45deg);}
?
像這種文字前后都有圖片，那個圖片看似可以用css3來寫，不過貌似不規則，沒辦法只能切圖片。 文字前后均有這個直接用:before和:after 是多么美好
/* 背景斜線 */ p:before,p:after{position: absolute;content: "";width: 23px;height: 1em;background: url('XXXXX.png') left bottom no-repeat;background-size: 17px 10px; } p:before {left: 0;top: 13px; }
?
微博上的箭頭，那個小三角。可以用：before來做。不過新浪微博肯定不是那樣做的，在pc端要考慮兼容性問題，他是直接放在一個span標簽中的，可是我們在移動端那就不用怕，直接用：before吧.這樣可以少一個span標簽。 關于三角的實現方法也多。純css可以，里面內容用◆，color設置為相應的顏色即可。
?
?
這種文字居中，居中之后后面還有一個圖片。后面的圖片直接用：after 可以減少一個標簽
?
這種和上面類似，文字如果在h1標簽中，那么那個箭頭直接用：afterjiu 就搞定了
?
<p class="XX">關注XXX，我們將引導你 <br>獲得XXXXXXXXX</p>
.text {position: relative;color: #333333;font-size: 16px;text-align: center;line-height: 26px;font-weight: bold;margin: 32px 0 28px; }.text :after {content: "";position: absolute;width: 52px;height: 52px;right: -2px;top: 6px;background: url('Xxxx.png') no-repeat;background-size: 32px auto; }
?
說了：before 和：after用起來多么爽，我不得不說下box-shadow,
之前的》》》》》 可以用box-shadow來做
這個效果一個標簽搞定，外面圓一個，里面長方形用：before 三個點用：after 加上box-shadow
三個點這樣做
p{width: 100px;height: 100px;border-radius:50%;background:#666666;box-shadow:105px 0 #666666,210px 0 ?rgba(200,200,200,.4); }
下面這個加載動畫，N個小圓點，其實就是一個點加上N個box-shadow。每個box-shadow位置不同，透明度不同而已，只需一個標簽即可搞定。
css3是多么的強大，自己平時也沒系統地學習css3， 買了本《css3圖解》，以后慢慢研究。
看兩個碉堡的css3
http://css-tricks.com/examples/ShapesOfCSS/
http://www.cnblogs.com/lhb25/p/create-simpsons-characters-pure-css.html
騰訊的企鵝 ?美團的小娃娃 他們都用純css來畫過，有興趣可以去研究下，css3不是一般的強大。
?
