一、水平翻轉和垂直翻轉：
第一種：隨着現代瀏覽器對CSS3的支持愈發完善，對於實現各個瀏覽器兼容的元素的水平翻轉或是垂直翻轉效果也就成為了可能。相關的CSS代碼如下：
/*水平翻轉*/
.flipx {
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
/*IE*/
filter:FlipH;
}
/*垂直翻轉*/
.flipy {
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
/*IE*/
filter:FlipV;
}
第一種兼容性好；
第二種，就目前而言，對於基於webkit核心的瀏覽器，如Chrome以及Safari，實現元素的垂直翻轉或是水平翻轉也可以使用如下樣式：
/*水平翻轉*/
.flipx { transform: rotateY(180deg); }
/*垂直翻轉*/
.flipy { transform: rotateX(180deg); }
注意：用第二種情況在iPhone5會出現兼容問題，
transform: rotateY(180deg);
這樣寫選擇無效，如圖標題右邊圖片所示：
所以還是用第一種方法。
例子：
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <title>Document</title> <style type="text/css"> *{margin:0; padding:0;} body{ max-width: 640px; margin: 0 auto; } .left{ float: left; } .right{ float: right; } .public_bzhh_title{margin:15px 10px; height: 38px; line-height: 38px; color: #fff; text-align: center; display: block;background:url(bg_title_center.png) repeat-x; background-size: 1px 38px; } /*注意 background-size: 1px 38px; 當寬度寫成auto時，安卓手機標題背景不顯示background-size: auto 38px;*/ .public_bzhh_title span{ display: block; } .public_bzhh_title span.left, .public_bzhh_title span.right{ background:#ffc99f url(title_edge.png) no-repeat; width:21px; height: 38px; background-size: 100% 100%; } .public_bzhh_title span.center{ overflow: hidden; -ms-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap; } .public_bzhh_title span.right{ /*水平翻轉 這個兼容性比較好 安卓低版本都可以兼容*/ -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; } .note{font-size: 23px; color: red; margin: 10px; line-height: 30px; } </style> </head> <body> <div class="public_bzhh_title"><span class="left"></span><span class="right"></span><span class="center">你是否在困擾這些問題？</span></div> <p class="note">注意: </p> <p class="note">樣式中background-size: 1px 38px; 當寬度寫成auto時，安卓手機標題背景不顯示background-size: auto 38px;</p> </body> </html>
效果圖：
二、background-size兼容問題，在安卓手機上背景圖片無法顯示如圖所示：
.public_bzhh_title{margin:15px 10px; height: 38px; line-height: 38px; color: #fff; text-align: center; display: block;background:url(bg_title_center.png) repeat-x;background-size: auto 38px;}
若上面的樣式這樣寫就出現如上圖所示，兼容問題，寬不能用auto自適應來寫。
改這個兼容問題很簡單，只要把最后一個樣式改為 background-size: 1px 38px;就可以
效果圖：
