有了CSS3，網站開發及網站設計都發展到一個更高的層次。在本文中，作者收集了一些驚人的使用CSS3技術的例子，如果多數瀏覽器能兼容CSS3，那么這些技術很可能會被廣泛接受。


　　 1. Color animate any shape with CSS3 and a PNG

　　 第一個展示的是一個僅僅使用了CSS3技術的有趣的成果：一個可以變換背景的PNG圖像。背景使用了CSS3轉變。不是那種可以直接放在網站上的效果，而是展示CSS3功能的有趣的演示。

　　 2. Create adaptable layout using CSS3 media queries

　　 CSS3媒體調查可以使你的網站構架兼容于瀏覽器。也就是說，你可以輕松的制作一個同時適用于大型展示和手機移動裝置的設計，它具有較強的適應力。也許你 已經度讀過我關于那個主題的文章，所以我挑選了另外一個由網站設計師Nick La編寫的實用教程。一個所有的網站開發師們都應該知道的技術！

　　 3. Dim entire page when certain link is rolled over, css way

　　 適用于網站軟件的：當一個特定的鏈接自動翻滾時，頁面的剩余部分會呈昏暗狀態。對于其它難度更高的實驗來說，這項技術可能也是一個起點。

　　 4. Clipping text with CSS3 text-overflow

　　 text overflow是CSS3另外一個新的屬性，可以解決容量不足的問題。這個例子會告訴你關于該屬性的一些知識點。不幸的是，我的這篇文章，由于文本內容超過規定容量這個問題，只能使用Opera和IE9瀏覽器。

　　 5. Full Browser Width Bars 完整的瀏覽器寬度條

　　 另外一個有用的技巧來自于Chris Coyier：這個教程會教你制作完整的瀏覽器寬度條。

　　 6. CSS Mask-Image & Text CSS圖像遮罩和文本


　　 使用CSS3和圖像遮罩技術的文本成果。不幸的是，其效果在一些瀏覽器無法顯示，但這種問題在慢慢減少。當主要的瀏覽器都能兼容CSS3時，這項成果肯定會變得非常受歡迎。

　　 7. Image slider with CSS3 transitions 使用CSS3轉換制作圖像滑塊


　　 還有誰沒有聽說過JavaScript 滑塊，比如說NivoSlider？過去的兩三年，該效果十分風靡。新的CSS3動畫技術，可以加強圖像之間的轉換。這個工具叫Flux Slider，不兼容于jQuery和Zepto.js。基本上任何瀏覽器都支持CSS3的圖像轉換。

　　 8. Flared Borders with CSS 使用CSS3擴大圖像邊框

　　 當你需要制作圖像，在一個圓角box中顯示，有過這種情況嗎？。多虧了擴大圖像邊框這一功能，這個讓人頭疼的過程再也不需要了。這個教程教給你如何使用CSS3制作過大圖像邊框元素。而全部的代碼將會在老式瀏覽器中慢慢淘汰。

-------------------------------------------------------------------
　　譯文出處：伯樂在線 - 職場博客 - 美工設計
　　譯文鏈接：http://www.jobbole.com/entry.php/1256

　　原文：Jean-Baptiste Jung　　翻譯：敏捷翻譯- 宋彩珺

轉載于:https://www.cnblogs.com/ginowang42/archive/2011/08/16/2140734.html

總結

以上是生活随笔為你收集整理的8个应该了解的CSS3技术的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。