Web 前端技術：CSS3---新屬性，瀏覽器支持度，圓角邊框（border-radius），陰影（box-shadow），文字與字體（text-shadow屬性、word-wrap屬性、@font-

瀏覽器支持度

CSS3屬性：

columns：規定列的寬度和列數 默認寬度、列數值爲auto

column-width:每欄的寬度

column-gap :兩欄之間的間距距離

column-count : 欄目的數目

column-rule : color(色值) width(寬度) style(線條樣式) 分欄中的分割線的顏色寬度及樣式的設定

 

一、border-radius屬性(圓角邊框)

eg:

結合不一樣瀏覽器兼容問題，使用該CSS3新屬性 eg:

 

二、box-shadow屬性（陰影）

 

eg:

結合不一樣瀏覽器兼容問題，使用該CSS3新屬性 eg:

 

三、文字與文本

（1）text-shadow屬性

text-shadow:水平偏移  垂直偏移  陰影大小  顏色;

eg:

h1{ text-shadow:2px 2px 6px skyblue; color:blue; }

（2）word-wrap屬性

容許長單詞、URL強制進行換行

  word-wrap:break-word;

正常 與 加 break-word 的區別：（第一個是正常的，第二個是添加屬性的）

（3）@font-face 規則

四、2D轉換

 2D轉換的方法：對元素進行旋轉、縮放、移動、拉伸

transform：rotate(  30  deg );        旋轉30度

不一樣瀏覽器間兼容問題

transform:  scale( x, y );                 縮放

五、過渡與動畫

（1）過渡：將元素的某個屬性從「一個值」 在指定的時間內過渡到「另外一個值」。

transition-timing-function屬性取值

 

（2）動畫

步驟：

定義動畫：@keyframes規則

調用動畫：animation屬性

animation屬性的取值：

 eg：

 

六、3D變換

3D      transform-style：preserve-3d；

旋轉   transform：rotateX(30deg) | rotateY(30deg) | rotateZ(30deg);

透視    perspective:  px;