2008年9月19日金曜日

-webkit-border-radius

-webkit-border-radius -moz-border-radius

Webkit系(Safari、Chrome)とGecko系(Firefox)で角丸をCSSだけで実装できるのは以前にちょっとだけ触れました。(CSSでdivの両側に画像を使うとか)

何がいいかと言うと、リキッドデザインで楽できること。

ドキュメント

  1. MDC(Mozilla):-moz-border-radius
  2. ADC(Apple):Supported CSS Properties(ADCの方はページ先でCTRL( or Command) + Fで単語検索して下さい!)

Firefoxではこんな風に書いて角丸を指定できます。

div.kakumaru{
  -moz-border-radius:10px; /* 4つの角を角丸に */
  -moz-border-radius-topright:10px;    /* 右上だけ角丸 */
  -moz-border-radius-topleft-10px;     /* 左上だけ角丸 */
  -moz-border-radius-bottomright:10px; /* 右下だけ角丸 */
  -moz-border-radius-bottomleft-:10px; /* 左下だけ角丸 */

Safari

div.kakumaru{
  -webkit-border-radius:10px;
  -webkit-border-top-left-radius:10px;    /* 左上だけ角丸 */
  -webkit-border-top-right-radius:10px;   /* 右上だけ角丸 */
  -webkit-border-bottom-left-radius:10px; /* 左下だけ角丸 */
  -webkit-border-bottom-right-radius:10px;/* 右下だけ角丸 */
}

SafariとFirefoxで書き方が若干違うので注意です

こうしたらだめよん

-webkit-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-bottomleft:10px;
-webkit-border-radius-bottomright:10px;
mozillaはradiusが先webkitはradiusが後で間にハイフンが入ることに注意!

[追記] ちなみにOperaは現在は実装されてないようです。SVGでやる方法もある見たいですが、CSSだけのテクニックではないので省きます。IEも同様にVMLと独自拡張のbehaviorでhtcファイルを読み込ませて対応するようです。JavaScriptではNifty ConersやjQuery Cornerなどがあります。これ以外の方法で角丸を再現する場合、無駄なdivや無駄なspanタグを書くはめになると思います。htcもsvgもそうだけど、角丸の仕事はCSSに任せられる日が早く来てほしい。各ベンダーの接頭辞が消える日が...

追記 2009/02/23/

サンプル追加

jQuery UIもIEは角丸じゃなくなる~


<div style="border:solid 1px #999; -moz-border-radius:10px; -opera-border-radius:10px; -webkit-border-radius:10px; border-radius:10px">
  <p>jQuery UIもIEは角丸じゃなくなる~</p>
</div>

IEのhtcでやる方法だと、周りに銀色っぽい変な線が絶対表示されて変になります

6 件のコメント:

FH さんのコメント...

IEでできんと意味がないのじゃ~~~~orz

Dopin Ninja さんのコメント...

今回はCSSだけで実装できるサンプルということで省きました(追記しました)
IEでもbehaviorとHTCファイルでなんとかできるんですが、それ以前にCSSそのものの対応やDOMやそこらへんのバグが多過ぎてサポートする気になりません。
某吹奏楽団のHPはTrident系のブラウザでアクセスすると表示が崩れるか、もしくは一切表示されないか、ブラウザが落ちるスクリプトを近々埋め込むだりするかもしれません。
IEもTridentを廃止してWebKitを利用すればいいのに。Operaもw

FH さんのコメント...

しょうがないので枠だけ画像にして妥協している今日この頃です。

juner さんのコメント...

Operaにも
-opera-border-radius:10px;
ってなかったっけ?

Dopin さんのコメント...

-opera-border-radiusは検索するとヒットするんですが、実際にoperaで見てみると角丸になりませんね^^;
サンプルを追加してみました。何か間違いがあればご指摘をお願いしますm(_ _)m

匿名 さんのコメント...

IE で相変わらず駄目なブラウザ