通過CSS做出網站3D文字效果
作者：佚名 時間：2014-03-16 分享到：
通過CSS做出網站3D文字效果
大家知道通過圖像處理軟件可以使文字具有立體三維效果，那些我們能過CSS代碼在做網站時實現呢？答案是肯定的：我們將通過text-shadow屬性來實現這個功能。
text-shadow屬性允許通過陰影的使用使文本具有三維外觀。這個屬性值包括一個必需的偏移量，還有可選的模糊范圍和顏色。這個屬性可能包括用逗號分開的多于一個的屬性值組來得到陰影層，而此后每組值都是疊加在前一層上的，但總是在原始文本的下面。
屬性需要的偏移量是兩個長度值組成：第一個值指定水平偏移量；第二個指定垂直偏移量。正屬性值則反陰影放置在該文本的右下方，向右和向下的偏移量是由兩個長度值指定的。負值則把 陰影向左上方移動。
可選模糊范圍也是長度值，它指定了模糊邊框，而其效果則取決于輸出代理。另一個陰影值是顏色。當然這可以是一人RGB組合或顏色名，用來指定陰影的顏色。如果不指定該值，text-shadow將使用color屬性的顏色值。例如：
h1 {text-shadow:2px 2px 2px red}
p:first-letter {text-shadow:-1px -1px purple, 1px 1px orange}
第一個texe-shadow示例使得在文檔一級標題向后2個像素，向下10個像素，向右10個像素的位置出現模糊的紅色陰影。第二個示例在每個段落的第一個字母后產生2個陰影。紫色陰影的位置是第一個字母上面對個像素，左面5個像素的位置。另一個陰影除了是紫色以外與第一個示例一樣，其位置是每個段落第一個字母向右10個像素向下10個像素。如圖所示：
目前流行只有谷歌與360瀏覽器內核的部分瀏覽器可以支持該網站字體的CSS屬性。
如沒特殊注明，文章均為上海聯楷網絡原創,轉載請注明來自：http://www.ktcbnqb.cn/contact/20151229/n7338.html
