[ 網頁設計教程 ] 兼容所有瀏覽器的CSS3圓角- 其他教程 - 骨子愛創意

教學主題: 兼容所有瀏覽器的CSS3圓角

大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

今天的這個教學主題是: 兼容所有瀏覽器的CSS3圓角

這教學的重點為這幾點 [ 瀏覽器,所有,兼容,使用,CSS3,實現,setting,屬 ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

本文提到了一種很不錯的實現跨瀏覽器圓角的解決方案，但是說的不夠全面，前端觀察最近將整理更多更全面的資源給大家，敬請期待。

前一段時間，我經常收到一個關於如何在IE瀏覽器中使用CSS3的border-radius屬性實現圓角HTML元素的問題。你或許知道CSS3的border-radius 屬性被Safari、Firefox和Chrome等瀏覽器原生支持，但是由於某些原因IE並不支持它。

那麼要想在IE中實現圓角，你不得不使用一些技巧，比如使用帶有背景圖片的CSS類(看一下這篇文章)。

而我知道的在各個瀏覽器中實現圓角的較簡單快速的方案是結合CSS3和JavaScript。CurvyCorners是一個為HTML元素創建漂亮的圓角的免費JavaScript庫。效果如下：

該腳本的最大優勢是可以在Safari/Chrome/Firefox中使用原生的CSS3屬性(通過-webkit-border-radius和-moz-border-radius私有屬性分別支持)而在IE和Opera中使用JavaScript。

你所需要做的就是在頁面中引入curvycorners.js:

 

然後定義以下樣式：

 

然後在上面的樣式後面定義以下代碼：

tl, tr, bl, br分別是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。
如果你有不同的CSS類(例如roundedCorners、roundedCorners_1、roundedCorners_2等)你可以像這樣在前面的代碼中定義:

 

HTML代碼如下：

 

這就是在各個瀏覽器中的效果:

我認為這的確是在各個瀏覽器中比較簡單和快速的實現CSS3圓角的一種方案。但是，如果js腳本被瀏覽器禁用了怎麼辦？最靠譜的方案還是使用額外的使用背景圖片的CSS類來實現，或者使用額外的空白標籤(Google統計中使用的方法，沒有遇到的可以Google一下)。你有更好更簡單的方案嗎？歡迎留言給我們，多謝！

進入論壇參與討論: http://www.missyuan.com/viewthread.php?tid=424367

看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

希望我們所介紹的 兼容所有瀏覽器的CSS3圓角 這教學會喜歡

文章標題: 骨子愛創意- 兼容所有瀏覽器的CSS3圓角–轉載請註明來源處

本教學分類為網頁設計教程中的 其他教程相關教學

文章相關關鍵字為: 瀏覽器,所有,兼容,使用,CSS3,實現,setting,屬

本文永久連結 :兼容所有瀏覽器的CSS3圓角

本文轉載自 :VIA