PIE Css3 の動作確認

この記事は、PIE Css3（PIE-1.0.0）の動作確認したときの記録です。IE8以下のバージョンで閲覧すると画像表示が崩れてしまいますがPIEを使うことで簡単に対処することができます。XPのサポートが終了するとIE8での閲覧が減ると思いますが、現在、当サイトへアクセスされた方の約3割の方がIE8を使用されています。サポートの終了後もIE8への対応が必要と思われます。PIEを使うことで表示の崩れがなくなります。
※IE8とIE11での相違点（画像ファイルの位置に注意）
CSSを外部読み込みにすると不具合が発生しました。background: url（image1.jpg）を使用したときIE8で表示されますがIE11では表示されない現象です。これは、CSSファイルと同じディレクトリに画像を置くと表示されます。お試しください。

項　目

1．border-radius （角丸）

2．border-image （外枠に画像を使用）

3．box-shadow （シャドウ）

4．linear-gradient as background image （グラデーション）

5．multiple background images （背景に複数画像配置）

1．border-radius （角丸）

▼サンプル画像（1）		▼サンプル画像（2）

W：200×H：100 radius：25px		radius：50px
W：50 × H：100 W：100×H：50 W：50 × H：50		radius：50px

▼サンプル画像（3）
		radius：80px

#01 {
/* ▼CSS3の記述 */
background: url(image1.jpg);
-webkit-border-radius:25px;
-moz-border-radius:25px;
-o-border-radius:25px;
/* ▼CSS3 PIE用の記述 */
border-radius:25px;
behavior : url(PIE.htc);
}

▼css code only （画像なし）

radius：6px

▼css code only 影付（ 2px 3px 6px）

radius：6px

#02 {
/* ▼CSS3の記述 */
margin: 0px; padding: 6px 6px;
-webkit-border-radius:6px; -moz-border-radius:6px;
-o-border-radius:6px; border-radius: 6px;
background-color: rgba(255,100,255);
/* ▼CSS3 PIE用の記述 */
-pie-background: rgba(255,100,255);
behavior : url(PIE.htc);
}

2．border-image （外枠に画像を使用）

▼外枠画像＋内部背景色

border-image
＋
back-color

▼外枠画像＋内部背景画像

border-image
＋
back-image

#03 {
background-color:#fffddd;
border-image: url(image1.jpg) 10 10 10 10 / 10px 10px 10px 10px repeat stretch;
-moz-border-image: url(image1.jpg) 10 10 10 10 / 10px 10px 10px 10px repeat stretch;
-webkit-border-image: url(img/mage1.jpg) 10 10 10 10 / 10px 10px 10px 10px repeat stretch;
behavior : url(PIE.htc);
}

3．box-shadow （シャドウ）

▼css code only

radius：8px

radius：10px

#04 {
-webkit-border-radius: 8px;-moz-border-radius: 8px;
border-radius: 8px;-webkit-box-shadow:
#666 0px 2px 3px;-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #F8EDEF;
background: -webkit-gradient(linear, right center, left center, from(#F8EDEF), to(#EECF33));
background: -webkit-linear-gradient(#F8EDEF, #EECF33);
background: -moz-linear-gradient(#F8EDEF, #EECF33);
background: linear-gradient(#F8EDEF, #EECF33);
-pie-background: linear-gradient(#F8EDEF, #EECF33);
behavior : url(PIE.htc);
}

4．linear-gradient as background image（グラデーション）

▼css code only

radius：3px

radius: 5px

#05 {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius: 3px;
background: -webkit-gradient(linear, right center, left center, from(#afafff), to(#000066));
background: -moz-linear-gradient(#afafff, #000066);
-pie-background: linear-gradient(#afafff, #000066);
behavior : url(PIE.htc);
}

5．multiple background images （背景に複数画像配置）

▼Background画像
・画像 1	・画像 2


・画像 3	・画像 4	・画像 5

▼画像 1～5を表示

#06 {
width : 200px; height: 100px;
background: url(image1.gif) no-repeat,url(image2.gif) no-repeat,
            url(image3.gif) no-repeat,url(image4.gif) no-repeat,url(image5.gif) no-repeat;
-pie-background: url(image1.gif) no-repeat,url(image2.gif) no-repeat,
                 url(image3.gif) no-repeat,url(image4.gif) no-repeat,url(image5.gif) no-repeat;
behavior: url(PIE.htc);
}

　　　mixiチェック　　Tweet