疑似要素を使用して、角を丸くする：beforeおよび：after

注意！ これはすべて古くなっていますが、IE6のせいで2007年に私たちがどのように苦しんだかをみんなが知っているように、私は出版物を削除していません



タスク：最小限のhtmlコードで角の丸い挿入を行います。





おそらく誰もが角の丸いフレームに出くわしました。 最新のブラウザ（Safariを除く）は複数の背景をサポートしていないため、このようなことは、いくつかの要素を互いに入れ子にして行う必要があります。 そのようなことを避ける方法が今あります。

htmlコード：













CSSコード：

青いフレームの背景を設定します。

.incut{background: #dff7ff;padding: 20px;}







要素に4つのコーナーを掛けます：beforeおよびafter

.incut:before{

content:url();

background: url(i/border_tr.gif) no-repeat 100% 0;

height: 7px;

display: block;

margin: -20px -20px 13px -20px;

}

.incut:after{

content:url();

background: url(i/border_br.gif) no-repeat 100% 0;

height: 7px;

display: block;

margin:13px -20px -20px -20px;

}







IE（Firefox 1-2 Opera 7-9、Safari 3でチェック済み）を除くすべての最新ブラウザーで動作します。 すなわち、同様の機能がjsでハングアップします（それを別のcssファイルに置く方が良い-ie専用です）：

.incut{zoom:1;behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + '') : '');}







IE6-7で動作します。 無効なスクリプトを使用すると、ユーザーにはサイドバーに青色の背景が表示されます。 何も壊れません。



その結果、最小限のhtmlコードを持つ「防弾」フレームができました。 サイドバーで別の画像を指定して、その背景を指定できることに注意してください。



これらの擬似要素を同様の方法で使用すると、レイアウトのセマンティクスが大幅に向上します。 それはすべてあなたの想像力にかかっています。



UPD：

こちらの例をご覧ください 。