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


　　 1. Color animate any shape with CSS3 and a PNG

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

　　 2. Create adaptable layout using CSS3 media queries

　　 CSS3媒體調(diào)查可以使你的網(wǎng)站構(gòu)架兼容于瀏覽器。也就是說，你可以輕松的制作一個(gè)同時(shí)適用于大型展示和手機(jī)移動(dòng)裝置的設(shè)計(jì)，它具有較強(qiáng)的適應(yīng)力。也許你 已經(jīng)度讀過我關(guān)于那個(gè)主題的文章，所以我挑選了另外一個(gè)由網(wǎng)站設(shè)計(jì)師Nick La編寫的實(shí)用教程。一個(gè)所有的網(wǎng)站開發(fā)師們都應(yīng)該知道的技術(shù)！

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

　　 適用于網(wǎng)站軟件的：當(dāng)一個(gè)特定的鏈接自動(dòng)翻滾時(shí)，頁(yè)面的剩余部分會(huì)呈昏暗狀態(tài)。對(duì)于其它難度更高的實(shí)驗(yàn)來說，這項(xiàng)技術(shù)可能也是一個(gè)起點(diǎn)。

　　 4. Clipping text with CSS3 text-overflow

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

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

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

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


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

　　 7. Image slider with CSS3 transitions 使用CSS3轉(zhuǎn)換制作圖像滑塊


　　 還有誰(shuí)沒有聽說過JavaScript 滑塊，比如說NivoSlider？過去的兩三年，該效果十分風(fēng)靡。新的CSS3動(dòng)畫技術(shù)，可以加強(qiáng)圖像之間的轉(zhuǎn)換。這個(gè)工具叫Flux Slider，不兼容于jQuery和Zepto.js。基本上任何瀏覽器都支持CSS3的圖像轉(zhuǎn)換。

　　 8. Flared Borders with CSS 使用CSS3擴(kuò)大圖像邊框

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

-------------------------------------------------------------------
　　譯文出處：伯樂在線 - 職場(chǎng)博客 - 美工設(shè)計(jì)
　　譯文鏈接：http://www.jobbole.com/entry.php/1256

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

轉(zhuǎn)載于:https://www.cnblogs.com/ginowang42/archive/2011/08/16/2140734.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。