如何使用CSS3實現一個平滑的3D文本標題

要實現3D文本，基本上有3種方法：

1. 使用CSS3的投影濾鏡（filter: drop-shadow）

2. 使用3d建模和CSS3 3d變換來實現（最真實）

3. 使用CSS3 text-shadow屬性來實現（最簡單，可複製，現代瀏覽器都支持）

本例簡單說明使用text-shadow屬性來實現3D文本的原理和方法。

這依賴於text-shadow屬性的兩個特性：其1是該屬性可以給文本添加投影效果，其2是可以在單個元素上應用多個投影效果。

先貼一張效果圖預覽下：

text-shadow的工作原理

我們看下下面這張圖就明白了：

text-shadow的語法

text-shadow: h-shadow v-shadow blur color;

h-shadow是水平方向陰影位置，v-shadow是垂直陰影位置，blur是模糊度，color是陰影顏色

具體可參考W3School CSS3 參考手冊：http://techbrood.com/cssref?p=css3-pr-text-shadow

具體實現代碼

現在我們來構造疊加的陰影效果代碼：

.text-3d {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

這個效果的細節是調試出來的，前面幾個是投影拷貝，後面幾個加上淡色調模糊效果，以使得陰影平滑過渡，填補鋸齒。

你可以使用踏得網的CSS3文本陰影在線生成工具來調試：http://techbrood.com/cg-text-shadow

上面的樣式代碼可以被複用到您自己的文本標題上。

你也可以自己在線試試看。

by iefreer