CSS3 text | css文字陰影
![CSS3 text](https://i.imgur.com/axBPWDg.jpg)
CSS3text-shadow用來設計文字陰影效果,通常我們會用在網頁標題上,增加視覺效果,另外也可以用在一些藝術字型的設計,讓你不需要透過GIMP或Photoshop這類繪圖軟體也可以輕鬆做出shadow效果。text-shadow獲得幾乎所有主流的瀏覽器支援,但在IE9及更早版本的IE瀏覽器並不支援text-shadow屬性,大部分主流瀏覽器如FireFox、Chrome、Safari、Opera等都有支援CSS3text-shadow屬性。CSS3text-shadow基本語法 text-shadow:X軸方向的陰影Y軸方向的陰影模糊範圍陰影顏色;CSS3text-shadow的屬性共分為X軸方向的陰影、Y軸方向的陰影、模糊範圍、...
CSS3 text-shadow 基本語法
text-shadow: X 軸方向的陰影 Y 軸方向的陰影 模糊範圍 陰影顏色;
CSS3 text-shadow 的屬性共分為 X 軸方向的陰影、Y 軸方向的陰影、模糊範圍、陰影顏色這四個部分,每個部分由半形空白隔開,意思是可以分別設定文字在水平與垂直兩個方向的陰影,第三個"模糊範圍"是選填項目,但沒有設定的話,可能會比較不柔和,請自行比較看看哪個輸出結果比較符合網頁風格,前三個參數的單位為長度,可以是 em、px 等,最後一個陰影顏色也是必填項目。CSS3 text-shadow 範例
<font style="text-shadow:3px 3px 3px #cccccc;">CSS3 shadow 陰影效果</font>
呈現結果如:CSS3 shadow 陰影效果範例中我們將 X 軸、Y 軸以及陰影範圍都設定為 3px,顏色採用淺灰色(色碼為 #cccccc)所製做出來的柔和陰影效果,是不是比較有立體感了呢?這個特效在 IE9 以及更早版本的 IE 瀏覽器看不到。假設我們將第三個屬性取消掉,就會顯得比較粗糙一點,就像下面這樣。
<font style="text-shadow:3px 3px #cccccc;">CSS3 shadow 陰影效果</font>
呈現結果如:CSS3 shadow 陰影效果CSS3 text-shadow 範例二:暈染效果
<font style="text-shadow:0px 0px 15px #FF37FD;">CSS3 shadow 暈染陰影效...
取得本站獨家住宿推薦 15%OFF 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
12種有趣的CSS陰影文字 | css文字陰影
CSS text | css文字陰影
CSS 文字陰影產生器 | css文字陰影
CSS3 shadow 陰影效果 | css文字陰影
CSS3 text | css文字陰影
CSS | css文字陰影
CSS | css文字陰影
text | css文字陰影
[CSS3]text | css文字陰影
![](https://i.imgur.com/axBPWDg.jpg)
![](https://i.imgur.com/axBPWDg.jpg)
![](https://i.imgur.com/axBPWDg.jpg)
![](https://i.imgur.com/axBPWDg.jpg)