3.28 效果 - 文字陰影

text-shadow 針對文字來建立陰影。

預設值是 none：

text-shadow: none;

語法：

text-shadow: 水平位移 垂直位移 模糊 顏色;

範例 1：文字陰影

以此為例，陰影紅色，向右移 2px，向下移 2px：

p {
  font-size: 100px;
  
  /* 水平位移 垂直位移 顏色 */
  text-shadow: 2px 2px red;
}

範例 2：文字陰影加上模糊

以此為例，文字顏色白色，陰影黑色，並向右移 2px、向下移 2px、模糊 5px：

p {
  font-size: 100px;
  color: white;
  
  /* 水平 垂直 模糊 顏色 */
  text-shadow: 2px 2px 5px red;
}

範例 3：文字陰影光暈效果

沒有位移，只有模糊及顏色：

p {
  font-size: 100px;
  
  /* 水平位移 垂直位移 模糊 顏色 */
  text-shadow: 0px 0px 5px blue;
}

範例 4：多個文字陰影

語法一樣，以逗號做分隔：

p {
  font-size: 100px;
  
  text-shadow: 0px 0px 5px blue, 3px 3px 0px red;
}