Zi 字媒體

教學主題: 兼容所有瀏覽器的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:   然後定義以下樣式： .roundedCorners{ width: 220px; padding: 10px; background-color: #DDEEF6; border:1px solid #DDEEF6;   /* Do rounding (native in Safari, Firefox and Chrome) */ -webkit-border-radius: 6px; -moz-border-radius: 6px; }   然後在上面的樣式後面定義以下代碼： addEvent(window, ‘load’, initCorners); function initCorners() { var setting = { tl: { radius: 6 }, tr: { radius: 6 }, bl: { radius: 6 }, br: { radius: 6 }, antiAlias: true } curvyCorners(setting, ".roundedCorners"); } tl, tr, bl, br分別是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。 如果你有不同的CSS類(例如roundedCorners、roundedCorners_1、roundedCorners_2等)你可以像這樣在前面的代碼中定義: … curvyCorners(setting, ".roundedCorners"); curvyCorners(setting, ".roundedCorners_1"); curvyCorners(setting, ".roundedCorners_2"); …   HTML代碼如下：   這就是在各個瀏覽器中的效果: 我認為這的確是在各個瀏覽器中比較簡單和快速的實現CSS3圓角的一種方案。但是，如果js腳本被瀏覽器禁用了怎麼辦？最靠譜的方案還是使用額外的使用背景圖片的CSS類來實現，或者使用額外的空白標籤(Google統計中使用的方法，沒有遇到的可以Google一下)。你有更好更簡單的方案嗎？歡迎留言給我們，多謝！ 進入論壇參與討論: http://www.missyuan.com/viewthread.php?tid=424367 看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢? 希望我們所介紹的 兼容所有瀏覽器的CSS3圓角 這教學會喜歡 文章標題: 骨子愛創意- 兼容所有瀏覽器的CSS3圓角–轉載請註明來源處 本教學分類為網頁設計教程中的 其他教程相關教學 文章相關關鍵字為: 瀏覽器,所有,兼容,使用,CSS3,實現,setting,屬 本文永久連結 :兼容所有瀏覽器的CSS3圓角 本文轉載自 :VIA