★ 地圖雷奧鎮市中心 ↓↓↓

顯示雷奧鎮街上位置圖

街上好不熱鬧，隨處閒晃著。(
竹輪也太美味！ 呵 )

真想再吃？！

怪？ 從剛就？？？ (
揉眼睛。)

：到底怎麼回事！！
眼前怎麼全是幻覺疊影？？

持續暈眩中！！！
(◎o◎)

雷奧鎮 [影隨者]：
只要試著掌控，分辨其中真偽，就能消除症狀！！
進入鎮內所有人，都需面對此考驗。

★★★ 關卡條件 ↓↓↓

文本陰影 (color, offset-x, offset-y, blur-radius)

該屬性為文字添加陰影。它接受以半形逗號分隔的陰影列表，應用於文本及其 text-decoration。每個陰影由元素的 X 和 Y 方向偏移值，模糊半徑和顏色值組成。

適用於 ::first-letter 和 ::first-line 偽元素。當給出多個陰影時，順序由前至後作用，首個指定的陰影位於最前層。多重模糊範圍會產生疊加效果。

• offset-x、offset-y：
  必選值。offset-x、offset-y 為兩個連續給值，這些 <length> 值指定陰影相對文字的偏移量。<offset-x> 指定水平偏移量，若是負值則陰影位於文字左側。<offset-y> 指定垂直偏移量，若是負值則陰影位於文字上側。如果兩個值均為 0，則陰影位於文字正後方。(<blur-radius> 模糊範圍若向外擴散，為可見效果)

• blur-radius：
  可選值。為一個 <length> 值。數值越大模糊範圍越擴散，陰影同時變寬和變亮。如未指定，則初始值為 0。

• color：
  可選值。陰影顏色。可以在偏移值之前或之後給定義。如未指定，則顏色值將留給瀏覽器決定，如需跨瀏覽器保持色彩一致，則應明確定義顏色。

雷奧鎮 [影隨者]：
剩沒多少時間！！快！！
方法已告訴你，接下來只能靠自己找到其規則。

：難道？ 我懂了！！
好像是～～ 啊～劇烈頭痛！！！！

/* Shadows are visible under slightly transparent text color */
h2 {
  font: italic bold 6em / 2em Georgia, Serif;
  text-align: center;
  margin: 0;
}

.sample_shadow1 {
  color: rgba(10, 60, 150, 0.8);
  text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}

.sample_shadow2 {
  background-color: #3a50d9;
  color: #e0eff2;
  text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}

.sample_shadow3 {
  color: #444;
  text-shadow: 
      1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc,
      1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 
      4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 
      4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 
      7px 6px 1px #ccc;
}

：皆是陰影，只有單一是真的。

好！好了。(
暈眩立馬好轉。)

看來我是找到對的答案了。

[ 追加經驗值 ]
註：參考來源 CSS-Tricks text-shadow
關於 MDN 由 Mozilla Contributors 製作，以 CC-BY-SA 2.5 釋出。