CSS3 的特性讓開發者都很方便, 可以省去很多沒用的 HTML, 也可以省掉不少切圖的工.
問題是, 現在最多人使用的瀏覽器(IE6~IE8)都還不支援 CSS3. 詳見: CSS Compatibility and Internet Explorer
註: IE8 部份支援 CSS3
JavaScript Hack IE Support CSS3
所以就有人用 JavaScript 寫了不少 Hack, 來讓 IE 支援 CSS3 的語法, 如下述:
- CSS3 PIE: CSS3 decorations for IE
- CSS3 support in Internet Explorer 6, 7, and 8
- Keith Clark - IE CSS3 pseudo-class selectors
在此就只針對 CSS3 PIE 最簡單介紹.
CSS3 PIE Source code
- CSS3 PIE 的 Source code: git clone git://github.com/lojjic/PIE.git
目前 CSS3 PIE 的支援語法
PIE currently has full or partial support for the following CSS3 features:
- border-radius: 圓角
- box-shadow: 區塊陰影
- border-image
- multiple background images
- linear-gradient as background image: 漸層顏色
- 詳見: About PIE
- 註: CSS3 PIE 是使用 .htc 的 hack 方式
使用 CSS3 PIE 官方文件
使用 CSS3 PIE 懶人法
- 觀看此頁: CSS3 PIE Demo
- wget http://css3pie.com/PIE.htc
- 點 Show CSS, 可以查看 CSS 語法, 可以跳過此步驟, 直接使用下述的 HTML + CSS 即可.
- vim index.html
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-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: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html> - 再用瀏覽器開啟 index.html 即可看到 圓角 + 漸層 + 陰影 的區塊囉~ (若以後 IE 退時後, 可將 PIE.htc 移除, 不會有影響)