[HTML5教學]文字陰影及圖框陰影的做法

文字陰影使用text-shadow
圖框陰影使用box-shadow

CSS3 text-shadow 基本語法
text-shadow: X 軸方向的陰影 Y 軸方向的陰影 模糊範圍 陰影顏色;
CSS3 text-shadow 用來設計文字陰影效果,通常我們會用在網頁標題上,增加視覺效果,另外也可以用在一些藝術字型的設計,讓你不需要透過 GIMP 或 Photoshop 這類繪圖軟體也可以輕鬆做出 shadow 效果。text-shadow 獲得幾乎所有主流的瀏覽器支援,但在 IE9 及更早版本的 IE 瀏覽器並不支援 text-shadow 屬性,大部分主流瀏覽器如 FireFox、Chrome、Safari、Opera 等都有支援 CSS3 text-shadow 屬性。

CSS3 box-shadow 基本語法
box-shadow:inset offset-x offset-y blur-radius spread-radius 陰影顏色;
各個參數的功能如下說明
inset:設定內陰影,選擇性項目,可將預設的外陰影改為內陰影(沒有定義就是一般在外的陰影)。
offset-x:x 軸方向的陰影大小,單位為長度單位,如 em、px 等。
offset-y:y 軸方向的陰影大小,單位為長度單位,如 em、px 等。
blur-radius:模糊半徑,選擇性項目,預設值零。
spread-radius:擴散半徑,選擇性項目,預設值零。
陰影顏色:必要項目,自行決定陰影的顏色,可由色碼表挑選顏色。

0 個評論

要回覆文章請先登入註冊