CSS基礎：經過文字陰影實現文字的立體感，印刷感，描邊和虛化效果

準備兩段如出一轍的楷體文本，用來對比效果（有些效果從截圖上看可能不是很明顯，建議本身在瀏覽器中試一試）

<p class="text1">
    人生並不只是一趟冒險之旅，人生也是咱們應該花時間去享受的幸福之旅。
    你能夠同時找到探險和快樂，在那些你愛的人身上，在那些你愛的人跳動的眼神裏，在那些你愛的人快樂的臉上。
</p>

<p class="text2">
    人生並不只是一趟冒險之旅，人生也是咱們應該花時間去享受的幸福之旅。
    你能夠同時找到探險和快樂，在那些你愛的人身上，在那些你愛的人跳動的眼神裏，在那些你愛的人快樂的臉上。
</p>複製代碼

.text1 {    
  width: 80%;
  margin: 20px auto;
  font-size: 18px;
  font-family: STKaiti;  
}  
.text2 {  
  width: 80%;  
  margin: 20px auto;  
  font-size: 18px;  
  font-family: STKaiti;
}複製代碼

立體感

給text2加上1px靠右靠下的文字陰影，使文字具備立體感

.text2 {  
  width: 80%;  
  margin: 20px auto;  
  font-size: 18px;  
  font-family: STKaiti;
  text-shadow: 1px 1px 0 #aaa;
}複製代碼

印刷感

將文字陰影的水平和垂直偏移都設爲0，只添加1px的陰影模糊距離，同時顏色設置爲帶透明的陰影，從而模擬出一種油墨浸到紙張上時淡淡暈開來的印刷感（這個效果從截圖中看很是不明顯，在手機上有不錯的效果）。

.text2 {  
  width: 80%;  
  margin: 20px auto;  
  font-size: 18px;  
  font-family: STKaiti;
  text-shadow: 0 0 1px rgba(128, 128, 128, .5);
}複製代碼

描邊

將text2設置爲黑色背景，而後給文字四個方向同時加上1px的白色陰影，就會出現一種文字描了白邊的效果

.text2 {  
  width: 80%;  
  margin: 20px auto;  
  font-size: 18px;  
  font-family: STKaiti;
  background: black;
  text-shadow: -1px -1px 0 #fff, 
               1px  -1px 0 #fff,
               -1px 1px 0 #fff,
               1px  1px 0 #fff;
}複製代碼

虛化

在黑色背景下只設置模糊距離，就能出現一種模模糊糊的虛化效果

.text2 {  
  width: 80%;  
  margin: 20px auto;  
  font-size: 18px;  
  font-family: STKaiti;
  background: black;
  text-shadow: 0 0 10px #fff;
}複製代碼