·您當前的位置:主頁 > 技術教程 > Html5技術 >

                          [CSS3]border-radius各瀏覽器的支持

                          時間:2019-01-26 11:42w3school
                          border-radius 只有在以下版本的瀏覽器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 標準語法格式,對于老版的瀏覽器

                          border-radius 只有在以下版本的瀏覽器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 標準語法格式,對于老版的瀏覽器,border-radius 需要根據不同的瀏覽器內核添加不同的前綴,比說 Mozilla 內核需要加上“-moz”,而 Webkit 內核需要加上“-webkit”等,那么我為了能兼容各大內核的老版瀏覽器

                          1、Mozilla(Firefox, Flock等瀏覽器)

                          -moz-border-radius-topleft: //左上角
                          -moz-border-radius-topright: //右上角
                          -moz-border-radius-bottomright: //右下角
                          -moz-border-radius-bottomleft: //左下角
                           
                          2、WebKit (Safari, Chrome等瀏覽器)
                           
                          -webkit-border-top-left-radius: //左上角
                          -webkit-border-top-right-radius: //右上角
                          -webkit-border-bottom-right-radius: //右下角
                          -webkit-border-bottom-left-radius: // 左下角
                           
                          3、Opera瀏覽器:

                          border-top-left-radius: //左上角
                          border-top-right-radius: //右上角
                          border-bottom-right-radius: //右下角
                          border-bottom-left-radius: //左下角
                           
                          4、Trident (IE)

                          IE9 以下版本不支持 border-radius,而且 IE9 沒有私有格式,都是用 border-radius,其寫法和 Opera 是一樣的
                           

                          熱門文章推薦

                          請稍候...