瀏覽器相容圓角Border radius的問題

2022-08-25 15:24:35 字數 2054 閱讀 9029

圓角css**:border-radius只有在以下版本的瀏覽器:firefox4.0+、google chrome 10.0+、opera 10.5+、ie9+支援border-radius標準語法格式,對於老版的瀏覽器,border-radius需要根據不同的瀏覽器核心新增不同的字首,比說mozilla核心需要加上「-moz」,而webkit核心需要加上「-webkit」等,那麼為了能相容各大核心的老版瀏覽器,我們看看border-radius在不同核心瀏覽器下的編寫格式:

1、mozilla(firefox等瀏覽器)

-moz-border-radius-topleft: //左上角

-moz-border-radius-topright: //右上角

-moz-border-radius-bottomright: //右下角

-moz-border-radius-bottomleft: //左下角  

等同於:

-moz-border-radius: //簡寫

2、webkit ( chrome等瀏覽器)

-webkit-border-top-left-radius:  //左上角

-webkit-border-top-right-radius:  //右上角

-webkit-border-bottom-right-radius:  //右下角

-webkit-border-bottom-left-radius:  // 左下角

等同於:

-webkit-border-radius:  //簡寫

3、opera瀏覽器:

border-top-left-radius: //左上角

border-top-right-radius: //右上角

border-bottom-right-radius: //右下角

border-bottom-left-radius: //左下角

等同於:

border-radius: //簡寫

4、trident (ie)

ie<9不支援border-radius;ie9下沒有私有格式,都是用border-radius,其寫法和opera是一樣的。

不管是新版還是老版的各種核心瀏覽器都能支援border-radius屬性,那麼我們在具體應用中時需要把我們的border-radius格式改成:

-moz-border-radius: none |  [/  ]?

-webkit-border-radius: none |  [/  ]?

border-radius: none |  [/  ]?

其拆分開來的格式需要加上-moz和-webkit,上面的**就等價於下面的**:

-moz-border-radius-topleft:   //左上角

-moz-border-radius-topright:   //右上角

-moz-border-radius-bottomright:   //右下角

-moz-border-radius-bottomleft:   //左下角

-webkit-border-top-left-radius:    //左上角

-webkit-border-top-right-radius:    //右上角

-webkit-border-bottom-right-radius:   //右下角

-webkit-border-bottom-left-radius:    // 左下角

border-top-left-radius:   //左上角

border-top-right-radius:   //右上角

border-bottom-right-radius:   //右下角

border-bottom-left-radius:   //左下角

注:border-radius一定要放置在-moz-border-radius和-webkit-border-radius後面,(特別宣告:本文中所講例項都只寫了標準語法格式,如果你的版本不是上面所提到的幾個版本,如要正常顯示效果,請更新瀏覽器版本,或者在border-radius前面加上相應的核心字首,在實際應用中最好加上各種版本核心瀏覽器字首。)

瀏覽器相容

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...

瀏覽器相容

1 css bug css樣式在各瀏覽器中解析不一致的情況,或者說 css樣式在瀏覽器中不能正確顯示的問題稱為 css bug.2 css hack css中,hack 是指一種相容 css在不同瀏覽器中正確顯示的技巧方法,因為它們都屬於個人對 css 的非官方的修改,或非官方的。有些人更喜歡使用 ...

瀏覽器相容

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...