創建圓角的方法
CSS3
隨著HTML5/CSS3的到來,CSS3樣式的圓角必將成為構建未來網站的趨勢。CSS3相對於其它方式,更加容易套用,不需要額外的HTML標記和圖片。目前支持CSS3圓角的瀏覽器包括FireFox,Chrome,Opera,IE9等;由於目前中文用戶多使用IE,並且多為IE6-IE8,因此,CSS3的普及尚需時日。
CSS+圖片
CSS2圓角一般需要額外的HTML標記和圖片,然而其優點也是非常明顯的:支持所有主流瀏覽器,包括IE(6-9),FireFox,Chrome,Opera等。
純CSS
純CSS圓角,不需要圖片,因此,網站載入速度更快,然而需要額外的HTML標記,並且效果也沒有帶圖片的圓角精美。
JavaScript
JavaScript圓角不需要額外的HTML標記和圖片,有現成的代碼,一勞永逸。然而對於病毒泛濫的今天,很多用戶會禁用JavaScript,對於用戶體驗至上的網站,如果用戶關閉掉JavaScript,自己所有的一切努力也就白費了。
圓角專利
蘋果此前獲得的諸多關於 iPhone 和 iPad 的專利中或多或少都會包含一些實際的功能,比如 Home 鍵、背面輪廓設計或者前面板整體玻璃復蓋設計等。但此次獲得的專利卻單單描述了一個設備的外觀設計,矩形圓角。這項專利的適用場景真的太廣了,當然你可以說專利圖中的畫像將這項專利限制在特定長寬比的設備中,這樣有著其他尺寸和比例的平板還是可以不侵權的。
線上資源
RoundedCorner
Rounded Corner支持多種樣式的圓角生成,可以生成標準圓角,帶框線的圓角,帶漸變色的圓角,並且可以集成CSS Sprite技術,從而加快網站載入速度,提高用戶體驗。
該工具支持中文。
純CSS圓角生成器
SpiffyCorners可可以創建純CSS格式的代碼,目前不支持中文。
JQueryCorner
JQuery Rounded Corner作為JQuery的外掛程式,是套用最廣的JavaScript圓角外掛程式。