CSS3常用屬性

標籤：lte   百分比符號   顯示   inf   垂直   相容   最新   逆時針   否則   

CSS是我們常用的控制網頁樣式和布局的一種標準。

CSS3是最新的CSS標準。

 

CSS3被拆分為“模組”，舊的規範也已經拆分為小的塊，同時還增加了新的屬性。

一些比較重要的CSS3的模組：選取器、盒模型、背景和邊框、文字特效、2D/3D轉換、動畫等。

 

CSS3邊框：

使用用CSS3，可以建立圓角邊框，添加陰影框，並作為邊界的形象而不使用畫面設計程式，如Photoshop等軟體。

CSS3圓角：border-radius屬性——建立邊框線的圓角

樣本：

 

值的類型可以是像素，也可以為百分比。

CSS3盒子陰影：box-shadow屬性——建立陰影

樣本：

 

值有3個時，表示距離左側、距離上側、影子顏色

值有4個時，表示距離左側、距離上側、虛化的像素、影子顏色

值有5個時，表示距離左側、距離上側、虛化的像素、影子顏色、是否顯示在內部並且將顏色進行反轉

CSS3邊界圖片：border-image屬性——可以允許使用圖片作為邊框

樣本：

 

border-image屬性在IE和QQ等瀏覽器中並不相容

 

CSS3背景：

背景圖片大小：background-size屬性——可以規定背景圖片的尺寸

樣本：

 

 

兩個值，分別表示寬度，高度。可用像素和百分比。

背景圖片定位：background-origin屬性——規定背景根據邊框定位還是根據文本定位

樣本：

 

 

border-box：根據邊框定位

content-box：根據文本進行定位

多重背景圖片：background-image屬性——可以規定多張不相同的圖片疊加出現效果，最好使用向量圖。

樣本：

 

 

寫法中使用逗號隔開引用圖片即可。

 

CSS3文字效果：

文本陰影：text-shadow屬性——可以向文本應用陰影製作效果

樣本：

 

 

四個值：分別代表距離左側、距離上側、模糊程度及陰影顏色

 

文本自動換行：word-wrap屬性——允許文本強制文本進行換行，這意味著會對單詞進行拆分

樣本：

 

值：break-word：允許對單詞進行拆分換到下一行。

 

 

CSS3 轉換：

通過CSS3轉換，我們能夠對元素進行移動、縮放、轉動、拉長或展開。

轉換是使元素改變形狀、尺寸、位置的一種效果。

我們可以使用2D或3D轉換來轉換我們的元素。

 

2D轉換：transform屬性——變形、轉換

內建方法：rotate()——進行旋轉，括弧內部寫旋轉角度，預設順時針旋轉

允許負值，元素將進行逆時針旋轉

樣本：

 

 

內建方法：translate()——從當前位置進行移動，括弧內為x，y值

允許負值，將反方向移動

樣本：

 

 

內建方法：scale()——改變原始大小，按照倍數變化，括弧內為width、height的倍數

樣本：

 

內建方法：skew()——水平、垂直方向進行扭轉，括弧內是水平扭轉角度、垂直扭轉角度

樣本：

 

 

3D轉換：transform屬性——變形、轉換

內建方法：rotateX()——沿水平X軸進行垂直的翻轉，括弧內寫轉動度數

樣本：

 

內建方法：rotateY()——沿垂直Y軸進行水平的翻轉，括弧內寫轉動度數

樣本：

 

 

2D轉換跟3D轉換的區別：2D轉換僅僅在於平面，文字可以看出並沒有反過來

3D轉換是相當於鏡面效果的，進行了前後空間（涉及到了Z軸）的佔用進行的翻轉。

樣本：

 

 

 

CSS3過渡：transition屬性——專門應對顏色、長度、寬度、位置等變化的過渡

通過CSS3，我們可以在不使用Flash和JavaScript的情況下，為當前某元素從某樣式改變為某樣式的時候添加過渡效果。

我們僅僅使用到了一個transition屬性，專門來寫過渡從一個樣式到另一個樣式過渡時所花費的時間，以秒為單位。若時間長度不規定，預設為0，即沒有過渡時間。

在使用這個過渡效果的時候，我們使用了類似於超連結的l(link)、v(visited)、h(hover)、a(active)樣式的控制。

此過渡時間可以規定背景改變、位置改變、及上面看到過的2D轉換、3D轉換再加上位置改變等樣式變化需要使用的時間長度。

樣本：

 

主要使用hover和active：

hover：當我們滑鼠指向的時候使用的樣式

active：當滑鼠點擊下去的時候使用的樣式

不僅僅可以在滑鼠指向時自動使用過渡時間，當我們使用JS對於樣式的某一部分進行修改之後也可以使用。
         樣本：

 

 

通過以上的對比，能夠看出擁有過渡效果更為容易被接收，不會顯得樣式變化過於突兀。

當然，我們的樣式屬性過渡可以分開單獨應對寬度、高度、顏色、2D、3D轉換來設定過渡時間。有喜歡單獨寫的同學可以參考W3School中的教程。

 

 

CSS3動畫：

通過CSS3，我們能夠建立動畫，這樣可以在許多網頁中取代動畫圖片、Flash動畫以及JavaScript動畫。

想要建立CSS3動畫，需要遵循@keyframes規則。

@keyframes規則用於建立動畫。在@keyframes中規定某項CSS樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。

註：IE需要10及以上。

建立好動畫之後需要綁定到某個選取器，否則不會產生任何動畫效果。

使用animation進行動畫捆綁。兩個值：動畫名稱、時間長度。

時間長度必須規定，否則預設為0。也就是表示沒有動畫效果。

樣本：

 

 

動畫是使元素從一種樣式逐漸層化為另一種樣式的效果。

可以改變任意多的樣式以及任意多的次數。

我們一般情況下使用0%~100%來規定動畫發生的時機。或者使用關鍵詞from...to...，效果等同於0%~100%。

0%是動畫的開始，100%是動畫的完成。

為了得到最佳的瀏覽器支援，我們將始終使用百分比來進行規定動畫

樣本：

 

 

以上樣本中只進行了一個樣式的改變。接下來我們看多項改變。

多項改變時只需要在每個百分比符號後的花括弧內寫上就可以了。

樣本：

 

 

在以上樣本中，我們的動畫只能進行一次就立馬停止了。我們想要此動畫效果持續執行，就只需要在我們的綁定選取器的動畫名稱和時間長度之後加上一個infinite值就可以無限執行了。

註：infinite——無限。

樣本：

 

 

我們可以看出在上一個樣本中，div的運行速度是開始慢，中間快，結束放慢的。這是預設的ease屬性帶來的效果，若想讓所有速度相同，我們可以在綁定選取器之後寫上linear即可。

註：ease——預設開始慢慢加速，結束時慢慢減速。

linear——預設始終使用相同速度運行。

樣本：

 

 

在以上所有無限動畫樣本中，我們可以看齣動畫是按照我們寫好的順序一直在執行，我們可不可以將它設定為交替執行呢？答案是可以的。

在捆綁選取器的動畫名稱、時間長度、無限次數後面寫上一個alternate即可。

註：alternate——交替執行（也可以成為正反執行）

樣本：

 

 

 

以上這些就是我們常用到的一些CSS3的樣式屬性，當然還有很多其他的，比如將文本像在報紙上一樣排列為多列等不怎麼常用的

CSS3常用屬性