css 3 + html 5 是未來的 web，它們都還沒有正式到來，雖然不少瀏覽器已經開始對它們提供部分支援。本教程分5節介紹了 5 個 css3 技巧，可以幫你實現未來的 web，不過，這些技術不應該用在正式的客戶專案，它們更適合你的個人部落格站點，web 設計社群，或者不會有客戶向你投訴的場合。
塊陰影與文字陰影
陰影效果曾讓 web 設計師既愛又恨，現在，有了 css3，你不再需要 photoshop，已經有**在使用這個功能了，如 24 ways website.
1. -webkit-box-shadow: 10px 10px 25px #ccc;
2. -moz-box-shadow: 10px 10px 25px #ccc;
3. box-shadow: 10px 10px 25px #ccc;
前兩個屬性設定陰影的 x / y 位移，這裡分別是 10px，第3個屬性定義陰影的虛化程度，最後乙個設定陰影的顏色。文字陰影也可以這樣設定： text-shadow: 2px 2px 5px #ccc;
支援的瀏覽器：firefox 3.1, safari, chrome (只支援 box 陰影) ，opera (只支援文字陰影).前3個數字表示紅綠藍三色的值，最後乙個值代表透明度，另外，我們還可以使用 opacity 實現透明度
1. box-shadow屬性的瀏覽器相容性
opera到最新的10.53版本，已經支援box-shadow屬性。
firefox通過私有屬性-moz-box-shadow支援。
safari和chrome通過私有屬性-webkit-box-shadow支援。
所有ie不支援(不知道ie9是否有所改善)。別急，我們將在文章最後會介紹一些針對ie的hack。
2. box-shadow屬性的語法
box-shadow有六個可設值:
img當不設陰影型別時，預設為投影效果。當設為inset時，為內陰影效果。
x軸和y軸位移不等同但類似於photoshop裡面的」角度」和」位置。
陰影大小、擴充套件、顏色和photoshop裡面的都同理。
(1). 投影，沒有位移，10px的陰影大小，沒有擴充套件，顏色#06c
img這裡的顏色值是hex值，我們還可以使用rgba值，rgba值的好處是，它多了乙個alpha透明值，你可以控制陰影的透明度。
img(2). 在上面的基礎上加上20px的擴充套件
img(3). 內陰影，無位移，10px大小，沒有擴充套件，顏色#06c
img(4). 多重陰影效果
box-shadow可以同時使用多次，我們來個四色的陰影。
img(5). 使用多個陰影屬性的順序問題
當給同乙個元素使用多個陰影屬性時，需要注意它的順序，最先寫的陰影將顯示在最頂層。比如下面這段**，我們先寫乙個10px的綠色陰影，再寫乙個10px大小但擴充套件20px的陰影。結果是：綠色陰影層在黃色陰影層之上。
img但如果我們把順序調一下，像這樣:
img我們將看不到後寫的綠色陰影層，因為它先寫且半徑比較大的黃色層覆蓋掉了。
4. 讓ie也支援box-shadow
ie本身是shadow濾鏡可以實現類似效果的，還有一些js和.htc的hack檔案可以幫助你在ie中實現這一效果。我也無法一一都去嘗試，這裡只介紹我用過的乙個。
ie-css3.htc 是乙個可以讓ie瀏覽器支援部份css3屬性的htc檔案，不只是box-shadow，它還可以讓你的ie瀏覽器支援圓角屬性border-radius和文字陰影屬性text-shadow。
在你的裡面寫入下面的**:
藍色部份輸入要使用box-shadow屬性的選擇器，綠色部份輸入ie-css3.htc的絕對路徑，或相對路徑，反正要保證能訪問得到。
然後這樣就ok了。但還是有幾點需要注意的是：
當你使用了這個htc檔案後，你的css裡面，只要寫有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一種，ie就會渲染。
當使用了這個htc檔案後，你不能這樣寫box-shadow: 0 0 10px red; 而應該是box-shadow: 0px 0px 10px red; 否則ie中會失效。
不支援rgba值中的alpha透明度。
不支援inset內陰影。
不支援陰影擴充套件。
陰影在ie中只會顯示為黑色，不管你設定成其它什麼顏色。
CSS3 HTML5學習心得
1.字串 str.charat 字串索引 若索引超過字串長度，返回空。str.indexof 某字元 找到這個字元順序第一次出現的索引。str.lastindexof 某字元 找到某字串倒序最後出現的索引，若沒有返回 1。str.uppercase 將str轉換為大寫。str.lowercase 將...
CSS3 Html5學習筆記之CSS3多類選擇器
css 多類選擇器 我們處理了 class 值中包含乙個詞的情況。在 html 中，乙個 class 值中可能包含乙個詞列表，各個詞之間用空格分隔。例如，如果希望將乙個特定的元素同時標記為重要 important 和警告 warning 就可以寫作 this paragraph is a very ...
使用Html5 CSS實現文字陰影效果
前兩天有乙個學html5前端小美女問我乙個有關文字陰影的效果怎麼去實現。她和我說文字陰影嘛,她也知道text shadow,但是卻做不出想要的樣子,其實css3的新功能是很強大的,不要把你的思想太過於侷限化,好了,閒話也不多說,咱們就先來看看這個文字陰影.一.文字陰影 text shadow 文字陰...