webkitでは(今のところ?)border-radiusのショートハンドが使えない事とか。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

Firefoxだとこう書けるけどsafariやchromeではショートハンドが使えないので丸めたい角ごとに指定しないとダメみたい。

-moz-border-radius:左上 右上 右下 左下;

しかもmozとwebkitで指定が違う(面倒くさいなぁ)。

-moz-border-radius-topleft = -webkit-border-top-left-radius
-moz-border-radius-topright = -webkit-border-top-right-radius
-moz-border-radius-bottomleft = -webkit-border-bottom-left-radius
-moz-border-radius-bottomright = -webkit-border-bottom-right-radius

プレフィックスを外した時どちらが正式な記述なんだろうか?
[追記 / 20100903]
下記リンクを参考にするとどうやらwebkitの方が仕様に沿っているようですね。
CSS Backgrounds and Borders Module Level 3
[追記ここまで]

-moz-border-radius-topleft = -webkit-border-top-left-radius

-moz-border-radius-topright = -webkit-border-top-right-radius

-moz-border-radius-bottomleft = -webkit-border-bottom-left-radius

-moz-border-radius-bottomright = -webkit-border-bottom-right-radius

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメント

コメントを残す


You can add images to your comment by clicking here.