兼容各瀏覽器的css圓角

《兼容各瀏覽器的css圓角》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在行業(yè)資料-天天文庫。

1、有些惱人的圓角一些網(wǎng)站（尤其是娛樂性為主的網(wǎng)站）從用戶視覺體驗角度出發(fā)，會將用戶頭像設置為圓角顯示，以增加親和度。如開心網(wǎng)的用戶頭像：在此基礎上，追求更簡約的設計會直接將頭像圖片本身設置為圓角來展示，如騰訊朋友：這個效果看似簡單，但可能會令一些前端er感到頭疼。畢竟在尚不支持CSS3圓角屬性的IE大行其道的當下，高效的解決頁面中的批量圓角圖片不是那么容易?？吹阶詈蟮耐矔l(fā)現(xiàn)，本文也無最優(yōu)解，因為不同的環(huán)境，需求不同，技術(shù)實現(xiàn)也會不同。技術(shù)實現(xiàn)后端生成似乎對于前端來說，最希望的就是后端工程師在程

2、序開發(fā)上能支持用戶上傳頭像時候，可以自動生成一組用于前臺頁面不同情境下使用的頭像集合，既包含了默認直角的同時也會生成圓角版本的調(diào)用頭像。優(yōu)點：節(jié)省前臺頁面對圓角圖片處理的代碼量，為公司省帶寬，為用戶省加載時間。不足：后端開發(fā)成本提升，服務器負荷在生成頭像階段有極為微小的加劇。前端實現(xiàn)目前看來。似乎絕大部分的網(wǎng)站會采用由前端來實現(xiàn)這個效果。畢竟，前端負責的就是用戶瀏覽器里的那些東西。我們這里不會談論那個07年廣泛使用的“4個絕對定位”的方式，畢竟對于但頁面中數(shù)量眾多的用戶頭像來說，這個方法雖可

3、行但效率太差，同時也是表格布局思維的遺老——以視覺為基礎進行布局的意識要不得。方法一：針對非IE的更現(xiàn)代款瀏覽器，采用CSS3相信大家都會最喜歡這個方式，簡單高效，代碼無冗余可以保持優(yōu)雅，只是目前鑒于黑勢力的IE系列，若想普及還有待時日。DEMO請猛擊這里。HTML：