Blogger 標題的文字陰影效果

常常逛到別人的部落格，標題都有美美的陰影效果，自己的部落格只能放一張寫著標題文字的圖片權充一下，羨慕了好久，今天終於研究出來了，原來方法如下：

1. 進入 blogger 設計畫面，選擇「網頁元素」之「標頭」，按「編輯」
2. 移除原來的「圖片」，「位置」選擇第一項「輸入標題和說明之後」，按「儲存」。
3. 重點來了，選擇「修改 HTML」，找到如下段落，加上一行「text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);」，然後「儲存範本」。

#header { … 略 … }
h1 a:link  { … 略 …}
h1 a:visited  { … 略 …}
h1,h2,h3 { … 略 …}

h1 {
  padding-top:25px;
  padding-$endSide:0px;
  padding-bottom:10px;
  padding-$startSide:5%;
  color:$pagetitlecolor;
  background:$pagetitlebgcolor;
  font:$pagetitlefont;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  letter-spacing:-2px;
}

4. 進入「範本設計工具」，調整一下標頭文字與背景的顏色。

text-shadow 是 CSS 3.0 的語法，text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); 的意思是 text-shadow: x 位移 y 位移 模糊半徑 顏色;　其中 rgba(0, 0, 0, 0.5) 的意思是，rgba(red 值, green 值, blue 值, alpha 值)，red, green, blue 值可以是 0 ~ 255 的整數值，也可以是 0% ~ 100% 的百分比，alpha 值為透明度，允許小數 1 位，0 完全透明，1 完全不透明。