CSS text-shadow 替 H1 標題加陰影

常看到有些網站的文章標題有陰影效果，就像本篇的標題其實也帶有一點點陰影的效果，這是怎麼做到的呢？首先需要搞懂兩個東西，第一個東西就是網站標題 <H1> 標籤，第二個就是 CSS3 text-shadow 文字陰影，將這兩個語法結合在一起，就可以做出文章標題的陰影效果，這樣的效果好處在於可以讓標題更加有立體感也更加清晰，可以與網頁內文做一個簡單的區分。

HTML H1 標題與內文

<h1>這裡是範例標題</h1>
這裡是文章內容 .....................

網頁中最重要的標題通常會用 <h1> 標籤來標示，請參閱：HTML H1 H2 H3 H4 H5 H6 標題。

CSS3 text-shadow 語法

這是一個標準的 CSS 語法區塊，由『<style type="text/css">』開始至『</style>』結束，我們在裡面使用了 h1 這樣的宣告來設定 H1 標題的陰影效果，text-shadow 即為文字陰影效果的屬性，詳細用法請參閱：CSS3 text-shadow 文字陰影效果。

將以上兩個部分整合在一個網頁中

呈現效果

這裡是範例標題

這裡是文章內容 .....................

是不是很清楚的將文章標題與文章內容區分開來了呢？這樣的技巧在許多網站上都看得到，不過編輯在這裡建議，雖然 text-shadow 可以將 H1 標題明顯標示出立體感，但使用過量會造成暈染效果，反而會讓標題模糊掉，設計上需多注意呈現效果。

相關主題延伸閱讀