CSS3的新特性以及IE下的實現

2021-09-30 08:38:31 字數 719 閱讀 8476

隨著瀏覽器的公升級,css3已經可以投入實際應用了。

但是,不同的瀏覽器有不同的css3實現,相容性是乙個大問題。上週的ydn 介紹了css3 please **,該**總結了一些常用功能的寫法。

以下就是這些寫法的詳細介紹。所有**都經過了firefox 3.6和ie 8.0的驗證,原文的錯誤之處也已得到改正。

一、圓角(rounded corner)

.box_round

-moz-box-shadow、-webkit-box-shadow和box-shadow的設定是一樣的,都有4個引數,含義分別為:x軸偏移值、y軸偏移值、陰影的模糊度、以及陰影顏色。

ie 6~8使用其獨有的濾鏡,需要設定三個引數:offx(x軸偏移值)、offy(y軸偏移值)、color(陰影顏色)。

三、線性漸變(gradient)

.box_gradient

需要注意的是,字型檔案必須與網頁檔案來自同乙個網域名稱,符合瀏覽器的「同源政策」。另外,由於中文字庫案太大,伺服器端字型顯然只適用於英文本型。

七、其他

利用css3,還可以完成transform(變形),包括skew(扭曲)和scale(縮放),以及css transitions(動態變換)。這些內容待以後再補充。

css3的新特性

1.文字陰影text shadow text shadow 偏移量x 偏移量y 模糊度 顏色 注意 水平偏移量 正值向右,負值向左 垂直偏移量 正值向下,負值向上 模糊度不能為負數 可設定多個text shadow,每個用逗號分隔 例子 text shadow 1px 2px 3px red,2px...

css3新的特性

圓角邊框border radius 水平值 垂直值 border top left radius 1px 2px 設定左上角圓角 border bottom right radius 設定左下角圓角 border top left radius 設定右上角圓角 border bottom right...

CSS3的新特性

css3實現圓角 border radius 陰影 box shadow 對文字加特效 text shadow 線性漸變 gradient 旋轉 transform transform rotate 9deg scale 0.85,0.90 translate 0px,30px skew 9deg,...