CSS3練習筆記

CSS3被劃分爲模塊，其中最重要的CSS3模塊包括：

• 選擇器
• 框模型
• 背景和邊框
• 文本效果
• 2D/3D轉換
• 動畫
• 多列布局
• 用戶界面

1、邊框

• border-image：設置所有border-image-*屬性的簡寫形式。可能的值有：border-image-source：用在邊框的圖片的路徑；border-image-slice：圖片邊框向內偏移；border-image-width：圖片邊框的寬度；border-image-outset：邊框圖像區域超出邊框的量；border-image-repeat：圖像邊框是否平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)
• border-radius：設置所有四個border-*-radius屬性的簡寫形式
• box-shadow：向方框添加一個或多個陰影。box-shadow: h-shadow(必需，水平陰影的位置) v-shadow(必需，垂直陰影的位置) blur(可選，模糊距離) spread(可選，陰影的尺寸) color(可選，陰影的顏色) inset(可選，將外部陰影outset改爲內部陰影);
  
  

/* border-image測試，border-width是關鍵，是否虛線實現還是border-color不重要 */
.border-image-ele, .border-image-ele2{
	display: inline-block; padding: 5px 10px; 
	border: 10px dashed black; margin: 10px;
}
.border-image-ele{ border-image: url(../img/star/border.png) 30 30 round; }
.border-image-ele2 { border-image: url(../img/star/border.png) 30 30 stretch;}

2、顏色

• background-clip：border-box | padding-box | content-box; 規定背景的裁剪區域，默認值爲border-box; border-box: 背景被裁剪到邊框盒；padding-box: 背景被裁剪到內邊距框；content-box: 背景被裁剪到內容框
• background-origin: padding-box | border-box | content-box; 規定背景圖片的定位，默認值爲padding-box。padding-box: 背景圖片相對於內邊距來定位；border-box: 背景圖片相對於邊框盒來定位；content-box: 背景圖片相對於內容框來定位
• background-size: length | percentage | cover | contain; 規定背景圖片的尺寸，默認值爲auto。length: 設置背景圖片的高度和寬度，第一個值設置寬度，第二個值設置高度，如果只設置一個值，則第二個值會被設置爲auto；percentage: 以父元素的百分比來設置背景圖片的寬度和高度。第一個值設置寬度，第二個值設置高度，如果只設置一個值，則第二個值會被設置爲auto；cover: 把背景圖片擴展至足夠大，以使背景圖片完全覆蓋背景區域，背景圖片的某些部分也許無法顯示在背景定位區域中；contain: 把背景圖片擴展至最大尺寸，以使其寬度和高度完全適應內容區域

3、文本效果

• text-overflow：clip | ellipsis; 規定文本溢出包含元素時發生的事情。clip: 修剪文本；ellipsis：顯示省略號來代表被修剪的文本；
• text-shadow：語法text-shadow: h-shadow v-shadow blur color; ，向文本添加陰影。h-shadow：水平陰影的位置(必需); v-shadow: 垂直陰影的位置(必需); blur: 模糊的距離(可選); color: 陰影的顏色(可選)
• word-break：normal | break-all | keep-all; 規定非中日韓文本的換行規則。normal：使用瀏覽器默認的換行規則；break-all：允許在單詞內換行；keep-all：只能在半角空格或連字符處換行
• word-wrap：normal | break-word; 允許長單詞或url地址換行到下一行。normal：只在允許的斷字點換行（瀏覽器保持默認處理）；break-word：在長單詞或url地址內部進行換行。
  

4、字體

通過CSS3, Web設計師再也不必被迫使用“web-safe”字體了。
在CSS3 之前，web設計師必須使用已在用戶計算機上安裝好的字體。通過CSS3，web設計師可以使用他們喜歡的任意字體。當您找到或購買到希望使用的字體時，可將該字體文件存放到web服務器上，它會在需要時自動下載到用戶的計算機上。您“自己的”字體是在CSS3 @font-face規則定義的。

<style>
	@font-face {
		font-family: myFirstFont;
		src: url('Sansation_Light.ttf'), 
		     url('Sansation_Light.eot'); /* IE9+ */
	}
	div { font-family: myFirstFont; }
</style>

• font-family：規定字體的名稱（必需）
• src：定義字體文件的url(必需)
• font-stretch：定義如何拉伸字體（可選），默認是normal
• font-style：定義字體的樣式（可選），默認是normal
• font-weight：定義字體的粗細（可選），默認是normal
• unicode-range：定義字體支持的UNICODE字符範圍（可選），默認是“U+0-10FFFF”

5、2D轉換

通過CSS轉換，我們能夠對元素進行移動、縮放、轉動、拉伸。
transform的2D轉換方法有：

• translate(x, y)：元素從當前位置移動，根據給定的left(x座標)和top(y座標)位置參數。
• rotate(angle)：元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉
• scale(x, y)：元素的尺寸會增加或減少，根據給定的寬度（X軸）和高度（Y軸）參數
• skew(x-angle, y-angle)：元素翻轉給定的角度，根據給定的水平線（X軸）和垂直線（Y軸）參數
• matrix(n,n,n,n,n,n)：將所有2D轉換方法組合在一起。需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素。示例：transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0)

transform-origin：允許改變被轉換元素的位置。該屬性必須和transform屬性一同使用。使用格式：transform-origin: x-axis y-axis z-axis; x-axis | y-axis | z-axis 定義視圖被置於X軸 | Y軸 | Z軸的位置，可能的值有：top | right | bottom | left | center | length | % 。 默認形變中心是50% 50%，即元素中心，如果設置值爲：left top；則刑辯中心變成了左上角。

6、3D轉換

3D轉換的使用屬性除了2D中的transform和transform-origin， 還有transform-style、perspective、perspective-origin、backface-visibility。

• transform-style：規定被嵌套元素如何在3D空間中顯示。語法：transform-style: flat | preserve-3d;，flat表示子元素不保留其3D尾椎；preserve-3d表示子元素保留其3D位置。
• perspective：規定3D元素的透視效果。語法：perspective: numer | none;，number表示元素距離視圖的距離；none表示默認值，爲0，不設置透視。
• perspective-origin：規定3D元素底部位置。語法：perspective-origin: x-axis y-axis;，x-axis | y-axis 定義該視圖在X軸 | Y軸上的位置，可能的值有left | top | right | bottom | center | length | %。
• backface-visibility：定義元素在不面對屏幕時是否可見。語法：backface-visibility: visible | hidden;，visible表示背面是可見的，默認是可見；hidden表示背面是不可見的。
  
  
  

7、過渡transition

過渡是元素從一種樣式逐漸變爲另一種效的效果。要實現這一點，必須規定兩項內容：

• 規定您希望把效果添加到哪個CSS屬性上
• 規定效果的時長
  過渡的轉換屬性有這些：
• transition：簡寫屬性，用於在一個屬性中設置四個過渡屬性。語法：transition: property duration timing-function delay;，默認值是：all 0 ease 0。舉例說明，比如：transition: width 2s;、transition: all 1s;
• transition-property：規定應用過渡的CSS屬性的名稱。語法：transition-property: none | all | property，none表示沒有屬性會獲得過渡效果，all表示所有屬性都會獲得過渡效果，property表示定義應用過渡效果的css屬性名稱列表，多個屬性則以逗號分隔。
• transition-duration：規定過渡效果話費的時間，默認是0。語法：transition-duration: time;，time規定完成過渡效果需要花費的時間。
• transition-timing-function：規定過渡效果的時間曲線，默認是ease。語法：transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);，linear=規定以相同速度開始至結束的過渡效果（等於cubic-bezier(0,0,1,1)）,ease=規定慢速開始，然後變快，然後慢速結束的過渡效果，ease-in=規定慢速開始，ease-out=規定以慢速結束，ease-in-out=規定以慢速開始和結束的過渡效果，cubic-bezier(n,n,n,n)=在cubic-bezier函數中定義自己的值，可能的值是0至1之間的數值。
• transition-delay：規定過渡效果何時開始，默認是0。語法：transition-delay: time;， time表示規定在過渡效果開始之前需要等待的時間。
  
  

8、動畫

如需在CSS3中創建動畫，需要學習@keyframes規則。
@keyframes規則用於創建動畫，在@keyframes中規定某項CSS樣式，就能創建由當前樣式逐漸改爲新樣式的動畫效果。
另外還需要把@keyframes捆綁到某個選擇器。通過規定至少以下兩項CSS3動畫屬性，即可將動畫綁定到選擇器：

• 規定動畫的名稱
• 規定動畫的時長

可是使用關鍵詞“from”和“to”, 也可以使用百分比來規定變化的時間。
語法：@keyframes: animationname { keyframes-selector {css-styles;} }。animation-name表示動畫的名稱（必需）；keyframes-selector表示動畫時長的百分比（必需），合法的值：0-100% | from (與0%相同) | to(與100%相同)；css-styles表示一個或多個合法的CSS樣式屬性（必需）

其他動畫屬性有：

• animation：所有動畫屬性的簡寫屬性，除了animation-play-state屬性
• animation-name：規定你@keyframes動畫的名稱
• animation-duration：規定動畫完成一個週期所花費的秒或毫秒，默認爲0
• animation-timing-function：規定動畫的速度曲線，默認是“ease”
• animation-delay：規定動畫何時開始，默認是0
• animation-iteration-count：規定動畫被播放的次數，默認是1
• animation-direction：規定動畫是否在下一週期逆向地播放，默認是normal
• animation-play-state：規定動畫是否正在運行或暫停，默認是running。值有paused表示暫停，running表示動畫正在播放。
• animation-fill-mode：規定對象動畫時間之外的狀態。語法：animation-fill-mode: none | forwards | backwards | both;，none表示不改變默認行爲；forwards表示當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）；backwards表示animation-delay所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）；both表示向前和向後填充都被應用。
  
  

9、多列

通過多列屬性，可以對文本內容進行多列布局。

• column-count：規定元素應該被分隔的列數
• column-fill：規定如何填充列
• column-gap：規定列之間的間隔
• column-rule: 設置所有column-rule-*屬性的簡寫屬性
• column-rule-color：規定列之間規則的顏色
• column-rule-style：規定列之間規則的樣式
• column-rule-width：規定列之間規則的寬度
• column-span：規定元素應該橫跨的列數
• column-width: 規定列的寬度
• columns：規定設置column-width和column-count的簡寫屬性

10、用戶界面

新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等

• box-sizing：允許您以確切的方式定義適應某個區域的具體內容。例如，假如您需要並排放置兩個帶邊框的框，可通過將box-sizing設置爲“border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框盒內邊距放入框中。
• outline-offset：對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓
• resize：規定是否可有用戶對元素的 尺寸進行調整

測試例子見demo：https://github.com/xiaotanit/Tan_HtmlDemo