border-radius の実験
角丸の実験。CSS3のborder-radius
を使用します。
基本的な使い方
kadomaru01
border-radius
の値は、角丸の直径になるようです。
角丸から文字をはみ出させる実験1
kadomaru02
padding
をなくして border-radius
を多めにとった。
要素は角丸の外側へはみ出すことができるようだ。
角丸から文字をはみ出させる実験2
kadomaru03
padding
をなくして border-radius
を多めにとって、さらに overflow:hidden;
を足した。
これはブラウザによって解釈が変わった。Firefox では overflow はあくまで矩形で解釈され、角丸の外にはみ出すことができるのに対し、WebKit系(Safari/Chrome) では角丸の外にはみ出せないものとして解釈される。
4つの角を個別に指定する実験
kadomaru04
border-radius
に4つの値を与えてみた。
左上、右上、右下、左下の順に個別に指定できるようだ。ただし、これができたのはFirefoxのみで、WebKit系(Safari/Chrome) では無視される(角丸にならない)。