[CSS]角丸を使用しないで、四隅をすっきりみせるスタイルシート
Post on:2009年10月9日
sponsors
divで実装したパネルの四隅を1px欠けにして、角をすっきりみせるスタイルシートをonderhond.comから紹介します。
1px rounded corners/smart faking
demo
仕組みはdivを二つ使用し、paddingとmargin、もしくはmarginとborderで「1px欠け」を実装しています。
HTML
|
1 2 3 4 5 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="outer"> <div class="inner">box</div> </div> </textarea> |
CSS(padding&margin)
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> .example1 .outer {background:#0cc; margin:0px 1px; padding:1px 0px;} .example1 .inner {background:#0cc; margin:0 -1px;} </textarea> |
CSS(margin&border)
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> .example2 .outer {background:#0cc; margin:0px 1px; border:1px solid #0cc; border-left-width:0; border-right-width:0;} .example2 .inner {background:#cc0; margin:0 -1px; border:1px solid #0cc; border-top-width:0; border-bottom-width:0;} </textarea> |
CSS3で簡単に角丸を実装することができますが、このテクニックはIE6でも有効なものとなっています。
sponsors
