[CSS]一つの要素に背景やボーダーをマルチプルに配置する実用的なテクニック

CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します。 Multiple Backgrounds and Borders with CSS 2.1 CSS3のサポートは必要なく、対応ブラウザはCSS2.1の擬似要素をサポートするIE8+, Fx3.5+, Safari 4+, Chrome 4+, Opera 10+となっています。 実装の仕組みは上記の画像のように、擬似要素の「:before」と「:after」を利用したもので、複数の背景やボーダーを配置することで面白い効果が得られます。 下記にその実用的で面白い効果をもったデモを紹介します。 マルチプル バックグランド デモ：Multiple Backgrounds with CSS 2.1 CSSファイル：backgrounds.css

[kana321]

CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します

[masaya-chonan]

[

[eclucifer]

やりたかったこといっぱいだー

[running-props]

RT: [CSS]一つの要素に背景やボーダーをマルチプルに配置する実用的なテクニック –

[kurenai7]

めも。

[kurechon]

めも。

[fooo]

IEは8以降

[nors]

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

[mikemade]

IE8～

[dazed]

“擬似要素の「:before」と「:after」を利用”

[sw_lucchini]

css3のちょっとしたテクニック

[kkeisuke]

CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニック