CSS3學習筆記，css3筆記

CSS3學習筆記，css3筆記

用的時候首先記得加首碼：-webkit-，-moz-，-o-，-ms-，因為目前各個瀏覽器對CSS3和HTML5的相容性還是參差不齊。

邊框：
1.border-radius(實心圓的實現)
2.box-shadow：X軸位移量 Y軸位移量 [陰影模糊半徑] [陰影擴充半徑] [陰影顏色] [投影方式](用逗號可疊加效果)
3.border-image：url(border.png) 70 70 70 70 round /repeat/stretch(由外到內切片的位移量，分別為上右下左)

顏色：
1.RGBA（多了一個透明度）
2.色彩坡形：linear/radial gradient（to left,#fff,blue,red）

文字和字型：
1.text-overflow：clip(剪下) | ellipsis(顯示省略)/*要實現溢出時產生省略符號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略符號的效果*/
2.word-wrap：normal（控制連續文本換行） | break-word(內容在邊界內換行)
3.@font-face{  font-family：字型名稱；src：字型檔在伺服器的路徑；}
4.text-shadow：X-Offset Y-Offset blur color;

背景：
1.background-origin: border-box | padding-box | content-box;/*設定元素背景圖片的原始起始位置，如果背景不是no-repeat，這個屬性無效*/
2.background-clip: border-box | padding-box | content-box | no-clip;
3.background-size: auto | <長度值> | <百分比> | cover(填滿整個容器) | contain(某一邊緊貼容器邊緣)/*設定背景圖片的大小,以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。*/
4.多背景圖

選取器：
1.新增屬性選取器a[href^=val]（開頭） | a[href$=val]（結尾） | a[href*=val]（包含）
2./:root/:not/:empty/:target（用來匹配指向連結的樣式）
3.first-child(匹配第一個子項目)/last-child/nth-child(數字)/nth-last-child/(類型)first-of-type/nth-of-type(2n)/:only-child(來控制僅有一個子項目的樣式)/only-of-type
4.:enabled/:checked/::selection選取器(滑鼠選擇時)/:read-only/:read-write/::before和::after(用來給清除浮動，添加陰影等)

變形：
1.rotate(..deg)(旋轉)
2.skew(x y)(扭曲)
3.scale(x,y)(縮放)
4.translate(x,y)(位移,可以應用在置中上)
5.matrix()(矩陣，用於2D變換)
6.transition-duration(過渡所需時間)
7.transition-timing-function(linear/ease-in-out/ease-out/ease-in)(隨著時間而過渡的快慢)
8.transition-delay(用來指定當改變元素屬性值後多長時間開始執行)

動畫：
1.Keyframes(類似於Flash中的主要畫面格)(格式：百分比{樣式})
2.animation-name(調用Keyframes定義好的動畫)
3.animation-duration(用來設定CSS3動畫播放時間)
4.animation-timing-function(主要用來設定動畫播放方式)
5.animation-delay
6.animation-iteration-count(infinite | <number>)
7.animation-direction(normal、alternate)
8.animation-play-state(running和paused)
9.animation-fill-mode(none、forwards、backwords和both)定義在動畫開始之前和結束之後發生的操作

布局：
1.columns：列寬 || 列數 / columns-width(auto/列寬) / column-count(auto/列數)
2.column-gap（列間距）
3.column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>（列表邊框）
4.column-span（跨列設定）
5.彈性盒子模型
6.伸縮布局