HTML幾個特殊的屬性標籤的使用介紹_HTML/Xhtml_網頁製作

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

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:

複製程式碼複製程式碼

複製程式碼


複製程式碼


複製程式碼


複製程式碼


複製程式碼


複製程式碼


複製碼如下:

height:100px; >background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and >-o-transition:width 2s; /* Opera */

}

div:hover { width:300px; }

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

註解：本例在 Internet Explorer 中無效。

TWO EG:





複製程式碼


程式碼如下:

transition:background 5s ease; /* Opera */ -o-transition-property:background; -o-transition-duration:5s; } div: hover { background:red; }

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

註解：本例在 Internet Explorer 中無效。