注意！ これはすべて古くなっていますが、IE6のせいで2007年に私たちがどのように苦しんだかをみんなが知っているように、私は出版物を削除していません
タスク：最小限のhtmlコードで角の丸い挿入を行います。
おそらく誰もが角の丸いフレームに出くわしました。 最新のブラウザ（Safariを除く）は複数の背景をサポートしていないため、このようなことは、いくつかの要素を互いに入れ子にして行う必要があります。 そのようなことを避ける方法が今あります。
htmlコード：
青いフレームの背景を設定します。
.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：
こちらの例を
ご覧ください 。