Firefoxだとこう書けるけどsafariやchromeではショートハンドが使えないので丸めたい角ごとに指定しないとダメみたい。
1 | -moz-border-radius:左上右上右下左下; |
しかもmozとwebkitで指定が違う(面倒くさいなぁ)。
1 2 3 4 5 | -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
はじめまして、
「ショートハンド safari」で検索してたどり着きました。
大変勉強になりました。
ありがとうございました。
まだまだ、勉強になりそうな記事が盛りだくさんですね。
またじっくり、読みに来ます。
mataiさんはじめまして、コメントありがとうございます。
知らなくても全然問題ないけど
知ってるとちょっと役に立つかもしれない細かいネタばかりですが
お時間が空いた時に見てやってください。
しかしまだwebkitはショートハンド使えないんですねぇ、すっかり忘れてました。