on:2012年1月13日sponsors画像を使用せずに、リスト要素で実装したシンプルなHTMLで角丸のタブをより美しく実装するチュートリアルを紹介します。Borders[ad#ad-2]下記は各ポイントを意訳したものです。Operaでご覧ください。IEはたぶんIE10で対応するはずです。デモページ実装まずは、HTMLから。HTMLタブをシンプルなリスト要素で実装します。adipisicing</li></ul>[ad#ad-2]CSSCSSの実装は、少しずつキャプチャとともに紹介します。ulとliのデフォルトのスタイルを取り除き、水平に並べてラインで囲みます。inline-block;}選択されたタブのスタイルを定義します。#000;}タブの下側にラインを引きます。ここで最初の擬似要素を使用します。1;}選択されたタブに下線は必要ないので、「z-index」を使用して下線がない状態にします。#FFF;}いよいよ、角丸のスタイルです。擬似要素を使用して、角丸の準備をします。#AAA;}borderを取り除いて、角丸を設定します。1px;}角を取り除くために、「box-shadow(赤い箇所)」を適用します。red;}赤のシャドウが角を包み隠しているのを確認したら、正しい色に変更します。#FFF;}最後に、より美しくするために、グラデーションとボックスシャドウなどを加えます。20px;}完成したデモは、下記のようになります。デモページ対応ブラウザはIE以外のすべてです。IE10はおそらく大丈夫だと思いますが、IE8/9は別のスタイルシートを用意する必要があります。Posts関連記事が見つかりませんでした。