注：本文由敏捷翻譯- 宋彩珺翻譯自Jean-Baptiste Jung的博文。如需轉載，請參照文章末尾處的宣告。
有了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製作過大影象邊框元素。而全部的程式碼將會在老式瀏覽器中慢慢淘汰。
原文：Jean-Baptiste Jung 翻譯：敏捷翻譯– 宋彩珺
如需轉載，但請註明原文/譯文出處、譯文超連結和譯者等資訊，否則視為侵權，謝謝合作！