以下幾項屬性對于瀏覽器的兼容很不好.

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:

復制代碼代碼如下:

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;

}

請把鼠標指針移動到藍色的 div 元素上，就可以看到過渡效果。

注釋：本例在 Internet Explorer 中無效。

TWO EG:

復制代碼代碼如下:

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;

}

請把鼠標指針移動到藍色的 div 元素上，就可以看到過渡效果。

注釋：本例在 Internet Explorer 中無效。

總結

以上是生活随笔為你收集整理的html特殊文字效果,HTML几个特殊的属性标签的使用介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。