border-radius實現圓角效果
1.
1 CSS3代碼：
2.
2
3.
3 -webkit-border-radius:10px;
4.
4 -moz-border-radius:10px;
5.
5 border-radius:10px;
6.
6 margin: 0px; padding: 0px; border: 0px; outline: 0px; float: none; vertical-align: baseline; position: static; left: auto; top: auto; right: auto; bottom: auto; height: auto; width: auto; font-family: 'Courier New', 宋體; background: none;">666;
7.
7 width:200px;height:100px;
Firefox，Chrome Google，Safari等瀏覽器的顯示效果如圖0-0：
圖0-0
但是IE這個異類不支持CSS3的這個屬性，在IE9下的顯示效果如圖0-1：
圖0-1
但是不能放任它不管，還是找辦法解決這個兼容性問題。
解決方案：在CSS文件中通過behavior屬性——這個屬性只能被IE識別，引入一個htc文件, ie-css3.htc
這個是由Remiz Rahnas使用 VML 編寫了一個 HTC 文件，為 IE 瀏覽器提供圓角效果的支持。
01.
1 div{
02.
2 -webkit-border-radius:10p;
03.
3 -moz-border-radius:10px;
04.
4 border-radius:10px;
05.
5 margin: 0px; padding: 0px; border: 0px; outline: 0px; float: none; vertical-align: baseline; position: static; left: auto; top: auto; right: auto; bottom: auto; height: auto; width: auto; font-family: 'Courier New', 宋體; background: none;">666;
06.
6 width:200px;
07.
7 height:100px;
08.
8 color:#fff;
09.
9 behavior: url(ie-css3.htc);
10.
10 }
截兩幅圖看看效果，一幅來自IE6，一幅來自IE9：
注意:首先，在 Server 端需要引入一個 HTC 文件，經過 gzip 壓縮后對 server 端和 client 端性能應該不會有太大的影響；其次，它會使你的 CSS 驗證不合法；另外，這個腳本在 IE8 上有一些問題，它會使 z-index 值變成負數。因此使用時還需要小心.
box-shadow實現陰影效果
01.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
03.
3 <head>
04.
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
05.
5 <title></title>
06.
6 <style type="text/css">
07.
7 div img{
08.
8 09.
9 -webkit-box-shadow:5px 5px 5px #000;
10.
10 -moz-box-shadow:5px 5px 5px #000;
11.
11 box-shadow:5px 5px 5px #000;
12.
12 width:295px;
13.
13 height:300px;
14.
14 /* For IE 8 */
15.
15 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000')";
16.
16 /* For IE 5.5 - 7 */
17.
17 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000');
18.
18 }
19.
19 </style>
20.
20 </head>
21.
21 <body>
22.
22 <div>
23.
23 <img src="beautiful.jpg">
24.
24 </div>
25.
25 </body>
26.
26 </html>
Chrome,Firefox,IE9下的效果顯示:
接下來要做的事情，想必讀者朋友都知道了，兼容IE6-8。首先想到的IE的濾鏡。來看看效果吧。
01.
1 加上濾鏡之后的代碼片段:
02.
2
03.
3 div img{
04.
4 05.
5 -webkit-box-shadow:5px 5px 5px #000;
06.
6 -moz-box-shadow:5px 5px 5px #000;
07.
7 box-shadow:5px 5px 5px #000;
08.
8 width:295px;
09.
9 height:300px;
10.
10 /* For IE 8 */
11.
11 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000')";
12.
12 /* For IE 5.5 - 7 */
13.
13 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000');
14.
14 }
測試之后的效果，分別是IE5.5-IE8：
雖然差強人意，但湊合着用。如果有朋友知道除此之外的方法，能否告知一聲，共同進步嘛！^_^
opacity實現透明度效果
01.
1 div img{
02.
2 width:295px;
03.
3 height:300px;
04.
4 -webkit-opacity:0.3;
05.
5 -moz-opacity:0.3;
06.
6 opacity: 0.3;
07.
7 /*for IE 6,7,8*/
08.
8 filter:alpha(opacity=30);
09.
9 border:1px solid #ccc;
10.
10 }
兼容IE 6,7,8。效果（來自IE6）：
transform:rotate(度數) 將元素旋轉X度
01.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
03.
3 <head>
04.
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
05.
5 <title></title>
06.
6 <style type="text/css">
07.
7 div {
08.
8
09.
9 width:150px;
10.
10 height:50px;
11.
11 margin: 50px;
12.
12 -webkit-transform:rotate(7deg);
13.
13 -moz-transform:rotate(7deg);
14.
14 -ms-transform:rotate(7deg);
15.
15 -o-transform:rotate(7deg);
16.
16 transform:rotate(7deg);
17.
17 border:1px solid #ccc;
18.
18 }
19.
19 </style>
20.
20 </head>
21.
21 <body>
22.
22 <div>
23.
23
24.
24 </div>
25.
25 </body>
26.
26 </html>
讓我們來去W3C看看transform的兼容性:
瀏覽器及其版本的支持，但是IE6,7,8呢？俗話說，兵來將擋，水來土掩，山人自有妙計，只不過這妙計是借來的。