2009/03/06

border-radius

border-radius

此特徵可用來作元素矩形格子的圓角。這是 CSS3 建議的特徵,發展還不成熟。Safari, Chrome 用 -webkit-border-radius;Firefox 用 -moz-border-radius。IE 無此項。可設的值有:

  1. 圓角半徑:可設一至四個圓角半徑,半徑值可是 長度百分比;百分比是相對於矩格的寬度。四個半徑值的順序是:左上,右上,右下,左下;少於四個值時,取對角相同。

    在 Safari, Chrome 可設兩個長度值,依序是圓角的水平與垂直半徑;四個角使用相同的水平與垂直半徑。只設一個值時,水平與垂直半徑相同。Safari, Chrome 不能使用百分比。

  2. inherit:繼承父元素特徵。

可以設定個別角

  1. 左上角:-moz-border-radius-topleft,-webkit-border-top-left-radius。
  2. 右上角:-moz-border-radius-topright,-webkit-border-top-right-radius。
  3. 右下角:-moz-border-radius-bottomright,-webkit-border-bottom-right-radius。
  4. 左下角:-moz-border-radius-bottomleft,-webkit-border-bottom-left-radius。

:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。

javascript 應用。可以用 style 物件 的特徵 MozBorderRadius 作動態變化。此範例使用到 toggleCSS()。此範例適用於 Firefox。實測時發現,Safari, Chrome 可以用 webkitBorderRadius 改變圓角,但是卻不能讀出值。