border-radius

語法:

border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

默認值0

取值:

<length>
用長度值設置對象的圓角半徑長度。不允許負值
<percentage>
用百分比設置對象的圓角半徑長度。不允許負值

說明:

設置或檢索對象使用圓角邊框。提供2個參數,2個參數以“/”分隔,每個參數允許設置1~4個參數值,第1個參數表示水平半徑,第2個參數表示垂直半徑,如第2個參數省略,則默認等于第1個參數
  • 水平半徑:如果提供全部四個參數值,將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序作用于四個角。
  • 如果只提供一個,將用于全部的于四個角。
  • 如果提供兩個,第一個用于上左(top-left)、下右(bottom-right),第二個用于上右(top-right)、下左(bottom-left)。
  • 如果提供三個,第一個用于上左(top-left),第二個用于上右(top-right)、下左(bottom-left),第三個用于下右(bottom-right)。
  • 垂直半徑也遵循以上4點。
  • 對應的腳本特性爲borderRadius

兼容性:

  • 淺綠 = 支持
  • 紅色 = 不支持
  • 墨綠 = 部分支持
  • 橙色 = 实验性质
支持版本\類型 IE Firefox Safari Chrome Opera
較早版本 6.0-8.0 4.0 5.1 13.0 11.50
較新版本 9.0

示例: