以下幾項屬性對於浏覽器的兼容很不好.
1.transform:rotate(45deg)
2.border-top-left-radius 該屬性允許您向元素添加圓角邊框
3.border-radius 該屬性允許您向元素添加圓角邊框
4.box-shadow 屬性向框添加一個或多個陰影
5.text-shadow 屬性向文本設置陰影
6.transition
為了更好的兼容各個浏覽器,需要加上前綴.
-o- /*Opera浏覽器*/
-webkit- /*Webkit內核浏覽器 Safari and chrome*/
-ms- /*IE 9*/
-moz- /*Firefox浏覽器*/
1.transform:rotate(45deg)
通過transform屬性使對象旋轉,其中(45deg)是旋轉的角度
transform:rotate(45deg);
-ms-transform:rotate(45deg); /*IE 9*/
-o-transform:rotate(45deg); /*Opera浏覽器*/
-webkit-transform:rotate(45deg); /*Webkit內核浏覽器 Safari and chrome*/
-moz-transform:rotate(45deg); /*Firefox浏覽器*/
2.border-top-left-radius border-radius 該屬性允許您向元素添加圓角邊框 前者可以選擇添加圓角邊框的位置
border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius
border-top-left-radius 該屬性允許您向元素添加圓角邊框,與border-radius一樣,只是可以控制需要添加圓角邊框的位置.
3.box-shadow屬性向框添加一個或多個陰影,text-shadow屬性向文本設置陰影 box-shadow: h-shadow || v-shadow || blur || spread || color || inset;
屬性:水平陰影的位置 || 垂直陰影的位置 || 模糊距離 || 陰影尺寸 || 陰影顏色 || 將外部陰影(outset)改為內部陰影
box-shadow:1px 1px 3px #292929;
text-shadow: h-shadow || v-shadow || blur || color;
text-shadow: 0px -1px 0px #000;
4.transition property || duration || timing-function || delay
規定設置過渡效果的 CSS 屬性的名稱 || 規定完成過渡效果需要多少秒或毫秒 || 規定速度效果的速度曲線 || 定義過渡效果何時開始
目前所有浏覽器都不支持 transition 屬性。
ease 默認。動畫以低速開始，然後加快，在結束前變慢.
ease-in 動畫以低速開始.
ease-out 動畫以低速結束
ease-in-out 動畫以低速開始和結束
transition:background 5s ease;
ONE EG:
復制代碼代碼如下:
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>請把鼠標指針移動到藍色的 div 元素上，就可以看到過渡效果。</p>
<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>
</body>
</html>
TWO EG:
復制代碼代碼如下:
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition-property:background;
transition-duration:5s;
/* Firefox 4 */
-moz-transition-property:background;
-moz-transition-duration:5s;
/* Safari and Chrome
-webkit-transition-property:background;
-webkit-transition-duration:5s;*/
transition:background 5s ease;
/* Opera */
-o-transition-property:background;
-o-transition-duration:5s;
}
div:hover
{
background:red;
}
</style>
</head>
<body>
<div></div>
<p>請把鼠標指針移動到藍色的 div 元素上，就可以看到過渡效果。</p>
<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>
</body>
</html>