如何美化網頁文字(12)-[text-shadow]將文字加入陰影 @ 雲橙雨林

0000標題023

再來介紹的就比較常用了，我們經常在使用文字想要加上該文字的陰影，都必須用圖形來替代，現在新版的css3 的語法中，有一個指令可以將該文字都變成了有陰影的文字，但是該語法為css3的語法，所以就有了相容性的問題，也就是說，如果使用者的瀏覽器版本較舊，就看不出效果了！所以，也是要注意的。

可使用的瀏覽器版本：

2012-10-11_173929

來寫段html 吧！

<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚和橙</title>
</head>
<body>
<h1>text-shadow</h1>
<p id="line1">魚和橙的結合1</p>
<p id="line2">魚和橙的結合2</p>
<p id="line3">魚和橙的結合3</p>
<p id="line4">魚和橙的結合4</p>
</body>
</html>

text-shadow 有3個參數值：

屬性參數順序	說明
第1個值	陰影效果的水平距離，正值為右，負值為左。
第2個值	陰影效果的垂直距離，正值為下，負值為上。
第3個值	陰影模糊的作用距離[不可為負值]。

我們加入css參數來看看吧！

<style type="text/css">
#line1 {
    text-shadow:none;
}
#line2 {
    text-shadow:5px 0px;

}
#line3 {
    text-shadow:0px 5px;

}
#line4 {
    text-shadow:4px 4px 2px;

}

來看看輸出結果吧！

2012-10-11_175544

該結果可以發現文字會朝著你所設定的方向而改變，而在#line4 因為加入第三個參數，而產生了模糊陰影。

再來，我們有時候想讓陰影有顏色，並不是單一黑色的時候，也可以經由這個，來改變，更可以加入複合的陰影，只要用 "," 來分別就可以了。

我們在相同的html 裡，再加入#line5 和 #line6 因為相同的輸入，就不說明html 的內容了，來看看結果吧！

再修改css吧！

<style type="text/css">
#line1 {
    text-shadow:none;
}
#line2 {
    text-shadow:5px 0px;

}
#line3 {
    text-shadow:0px 5px;

}
#line4 {
    text-shadow:4px 4px 2px;

}
#line5 {
    text-shadow:red 4px 4px 1px;

}
#line6 {
    text-shadow:yellow 1px 1px 0px, gray 8px 8px 3px;

}
</style>