CSS新特性有 1.CSS3選擇器 2.CSS3邊框與圓角 3.CSS3背景與漸變 4.CSS3過渡 5.CSS3變換 6.CSS3動畫 7.@Font-face 特性 8.的多列布局（multi-column layout） 9.Word-wrap & Text-overflow 樣式 ### 1. CSS3選擇器 #### 1.基本選擇器 基本選擇器又分為 :子選擇器 ,相鄰兄弟選擇器, 通用兄弟選擇器 ,群組選擇器 #### 2.屬性選擇器 1.element[attribute] 為帶有attribute屬性的元素設置樣式 2.element[attribute='value'] 為attribute='value'屬性的元素設置樣式 3.element[attribute~='value'] 選擇attribute屬性值包含 單詞value的元素 并設置樣式 4.element[attribute*='value'] 選擇attribute屬性值包含value的元素設置樣式 5.element[attribute^='value'] 選擇attribute屬性值是以value開頭的元素 6.element[attribute$='value'] 選擇attribute屬性值是以value結尾的元素 #### 3.偽類選擇器 1. 動態偽類 定義：這些偽類并不存在于HTML中，只有當用戶和網站交互的時候才能體現出來。 (1)錨點偽類 ~~~ :link :visited ~~~ (2)用戶行為偽類 ~~~ :hover :active :focus ~~~ (3)目標偽類 ~~~ :target 當我們點擊錨點鏈接時，對應id的元素會顯示在視口 ~~~ (4)checked狀態偽類 這里我們需要知道checkbox只能設置寬高，不能設置背景和邊框，如果想要設置那么我們需要用appearance:none;來清除input的默認樣式 2. CSS3結構類：nth選擇器 ：first-child/last-child 語法 element:first-child 選擇屬于父元素的首個/最后一個子元素的每個element元素，注意element為子元素。 ：nth-child(n) 選擇某元素下的第n個element元素（n是一個簡單的表達式，不能用其他的字母代替），括號里還可以傳odd和even兩個關鍵字 ：nth-last-child(n) 匹配屬于某元素下的第n個element子元素，從最后一個子元素開始計數 ：nth-of-type(n) 語法 element:nth-of-type(n) 匹配屬于父元素的特定類型的第n個子元素,element為指定類型的子元素 :nth-last-of-type 匹配屬于父元素的特定類型的第n個子元素，從最后一個計數 :first-of-type/:last-of-type 匹配屬于其父元素的特定類型的首個/最后一個子元素的每個元素 ：only-child 匹配屬于父元素的唯一子元素的每個元素 ：only-of-type 匹配屬于其父元素特定類型的唯一子元素的每個元素 ：empty 匹配沒有子元素（包括文本節點）的每個元素 3. 否定選擇器：not 定義：匹配非 元素或者選擇器 的每個元素 語法：父元素：not(子元素或者選擇器) 例：ul:not(span){} 4. 偽元素(也可以使用：) element::first-line 定義：對元素的第一行文本進行設置，只能用于塊級元素 element::first-letter 定義：用于向文本的首字母設置特殊樣式，只能用于塊級元素 element::before 定義：在元素的內容前面插入新內容，常與content配合使用 element::after 定義：在元素的內容后面插入新內容，常與content配合使用 element::selection 定義：用于設置瀏覽器中選中文本后的背景色與前景色 偽元素與元素的區別: 無法通過JS獲取其DOM 無法通過瀏覽器開發者工具直接查看 偽元素默認是 inline 使用偽元素注意事項： 1.使用偽元素before,after必須設置content 2.使用偽元素before,after顯示背景圖，一定要使用display設置為塊元素 3.使用偽元素before,after設置為display:inline-block,需要再次設置vertical-align:middle ### 2. CSS3邊框與圓角 1. CSS3圓角border-radius 定義：可以為元素添加圓角邊框（塊元素，行內塊元素，行內元素） 屬性： border-top-left-radius 左上角 border-top-right-radius 右上角 border-bottom-right-radius 右下角 border-bottom-left-radius 左下角 復合屬性：border-radius： 屬性值 四個值：左上角 右上角 右下角 左下角 三個值：左上角 右上角和左下角 右下角 兩個值：左上角和右下角 右上角和左下角 一個值：4個角都生效 border-radius中的屬性值由兩個參數值構成: value1 / value2，值之間用/分隔，value1代表圓角的水平半徑，value2代表圓角的垂直半徑。 圓形與橢圓： 一旦使用百分比，參照的是元素本身的高度與寬度 當拿50%時，寬等于高為圓形 寬不等于高為橢圓形 2. 盒陰影box-shadow 定義：可以控制一個或多個下拉陰影的框 語法：box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 擴展程度 顏色 是否具有內陰影 屬性值的介紹： 偏移量： ~~~ 把元素左上角（0，0）作為基準點，找水 平方向和垂直方向的偏移量 水平： 正值 --- 右 ，負值 --- 左 垂直： 正值 --- 下 ，負值 --- 上 ~~~ 模糊程度： ~~~ 邊界模糊，但是邊界線未動 由邊界線向外模糊多少像素 ~~~ 擴展程度： ~~~ 盒子陰影，上下左右都向外擴展多少像素 ~~~ 是否具有內陰影： ~~~ inset(默認沒有，也就是默認是外陰影) 加上inset,盒子的陰影為內陰影 擴展程度可為負值，但是模糊程度不可以 ~~~ ### 3. CSS3背景與漸變 1. CSS3背景 * `background-image` 語法： backgroundimage:url('1.jpg),url('2.jpg') 使用逗號把圖片分開 注意：元素引入多個背景圖片，前面圖片會覆蓋后面的圖片 * `background-cilp` 定義：指定背景的繪制區域（裁剪） 語法： background-cilp：border-box / padding-box / content-box 屬性介紹： border-box：背景被裁剪到邊框盒（從邊框開始繪制背景圖片）---默認 padding-box：背景被裁剪到內邊距框（從內邊距開始繪制背景圖片） content-box：背景被裁剪到內容框 * `background-origin ` 定義：設置背景圖像的原始起始位置 語法： background-origin：border-box / padding-box / content-box(背景圖片坐標原點與這三個有關系) 屬性的介紹： border-box：相對于邊框來定位 padding-box：相對于內邊距來定位 content-box：相對于內容框來定位 另外有一個需要了解 background-position:定義背景圖片的位置，水平與垂直方向上面的偏移量(參考點) * `background-repeat ` 定義：設置是否及如何重復背景圖像，默認地，背景圖像在水平和垂直方向上重復。 屬性值： repeat 默認。背景圖像將在垂直方向和水平方向重復。 repeat-x 背景圖像將在水平方向重復。 repeat-y 背景圖像將在垂直方向重復。 no-repeat 背景圖像將僅顯示一次。 inherit 規定應該從父元素繼承 background-repeat 屬性的設置 * `background-size ` 定義：指定背景圖像的大小 語法： background-size：number / % / cover / contain 屬性介紹： number: 寬度 高度（如果只寫一個數值，第二個數值默認auto） 百分比： 0% - 100% 之間的任何值，此時的百分比參照于元素div的大小 cover：將背景圖片等比縮放以填滿整個容器（最遠邊），如果高度達到一定比例100%，寬度多出的會溢出，但是，具體那部分溢出取決于定位 contain：將背景圖片等比縮放至某一邊緊貼容器邊緣為止（最近邊），如果圖片高度比較小，高度就會有空白區域出現 復合屬性background 定義：可以在一個聲明中設置所有的背景屬性 語法： background：color position size repeat origin clip attachment image; background: #abc center 50% no-repeat content-box content-box fixed url('1.jpg') ,url('2.jpg')... 2. CSS3漸變 定義：可以在兩個或者多個指定顏色之間顯示平移的過渡 (1) 線性漸變 定義：是沿著一根軸線改變顏色，從起點到終點進行順序漸變（從一邊拉向另一邊） 語法：background:linear-gradient(方向，開始顏色，結束顏色) 方向介紹： 1.方向從上到下（默認） background: linear-gradient(red,blue); 2.方向從左到右 background: linear-gradient(to right,red,blue); 3.對角 background: linear-gradient(to right bottom,red,blue); 4.角度(單位deg) background: linear-gradient(角度,red,blue); 角度說明：0deg 將創建一個從下到上的漸變，90deg將創建一個從左到右的漸變 顏色結點：默認每個顏色均勻分布 background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%); 從0%到10%，為紅色，從10%到20%為紅色到藍色的漸變，從20%到30%為藍色到綠色的漸變，從30%到40%，為綠色到黃色的漸變,從40%到100%為黃色 background: linear-gradient(red 10%,blue); 從0%到10%，為紅色，從10%到100%為紅色到藍色的漸變 最后如果不寫具體數值，默認到100% background: linear-gradient(red,blue 30%); 從0%到30%，為紅色到藍色的漸變 如果第一個不寫，默認數值是 0% background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1)); 由透明色變為不透明色 重復漸變 示例：background: repeating-linear-gradient(90deg,red 0%,blue 20%);或者 background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%); 注意：把元素的整體寬度看成100% (2)徑向漸變 定義：從起點到終點，顏色從內向外進行圓形漸變 語法：background:radial-gradient(形狀尺寸，開始顏色，結束顏色) 形狀分類： circle --- 圓形 ellipse --- 橢圓形 注意：當元素的高和寬一樣時，參數無論設置哪個，都是圓形 尺寸大小： closest-side最近邊 background: radial-gradient(closest-side circle,red , blue); farthest-side 最遠邊 background: radial-gradient(farthest-side circle,red , blue); closest-corner最近角 background: radial-gradient(closest-corner circle,red , blue); farthest-corner最遠角 background: radial-gradient(farthest-corner circle,red , blue); 顏色結點： 例： background:radial-gradient(circle,red 50% ,blue 70%); 注意：此時的百分比,指的是圓心到元素最遠端的距離（角度） (3)重復漸變 ： 示例： background: repeating-radial-gradient(red 0%,blue 20%); background: repeating-radial-gradient(red 0%,blue 10%,red 20%); ### 4. CSS3過渡 定義：允許css的屬性值在一定時間區間內平滑的過渡，在鼠標點擊，鼠標滑過或對元素任何改變中觸發，并圓滑地以動畫形式改變css的屬性值。 屬性： * 1.transition-property屬性 定義：設置對象中的參與過渡的屬性 語法：transition-property：none | all | property 參數說明： none： 沒有屬性改變 all : 默認值，所有屬性都改變 property： 元素的屬性名 width,color等 * 2.transition-duration屬性 定義: 設置對象過渡的持續時間 語法：transition-duration：time 參數說明： 規定完成過渡效果需要花費的時間，以秒或者毫秒計，默認值0 * 3.transition-timing-function屬性 定義：設置對象中過渡的動畫類型 語法：只能使用一個屬性值 參數說明： ease:平滑過渡（0--慢--快--慢），默認值 cubic-bezier(0.25,0.1,0.25,1) linear:線性過渡（勻速） cubic-bezier(0,0,1,1) ease-in:慢--快 cubic-bezier(0.42,0,1,1) ease-out:快--慢 cubic-bezier(0,0,0.58,1) ease-in-out:慢--快--慢 cubic-bezier(0.42,0,0.58,1) 貝塞爾曲線 :http://cubic-bezier.com/#.17,... * 4.transition-delay屬性 定義：設置對象延遲的過渡時間 語法：transition-delay：time 參數說明： 指定秒或者毫秒數來延遲動畫效果的開始，默認是0 * 5.transition復合屬性 語法： transition ： property duration timing-function delay； 參數說明：過渡時間和延遲時間的順序不能亂 ### 5. CSS3變換 定義：讓一個元素在一個坐標系統中變形，這個屬性包含一系列的變形函數，可以移動，旋轉，縮放元素。 語法：transform：none | <transform-function> 默認值是none 1. 2d變換 * 1.rotate()旋轉 定義：通過指定一個角度參數，對元素指定一個2D的旋轉 語法：transform：rotate(angle) 單位deg 參數說明：angle指旋轉角度，正數表示順時針旋轉，負數表示逆時針旋轉 * 2.translate()平移 定義：根據X軸和Y軸的位置給定參數，使當前元素位置移動 分類： translateX() 僅水平方向移動 語法：transform：translateX() 單位px translateY() 僅垂直方向移動 語法：transform：translateY() 單位px translate(x,y) 水平方向和垂直方向同時移動 語法：transform：translate( X, Y) 單位px 注意：如果只寫一個參數，第二個默認是0，也就是只設置了水平方向上的位移 * 3.scale( )縮放 定義：設置元素的縮放程度 分類： scaleX( ) 僅水平方向縮放 語法：transform：scaleX() 沒有單位 scaleY( ) 僅垂直方向縮放 子主題 語法：transform：scaleY() 沒有單位 scale(x,y) 使元素水平和垂直方向同時縮放 語法：transform：scale(x,y) 沒有單位 * 4.skew()扭曲/傾斜 定義：設置元素的傾斜狀態 分類： skewX( ) 僅使元素在水平方向上扭曲變形 單位deg 正值 ----逆時針 skewY( ) 僅使元素在垂直方向上扭曲變形 單位deg 正值 ----順時針 skew( ) 使元素在水平方向和垂直方向上扭曲變形 單位deg 注意：0deg與180deg 效果一樣 * 5.變換基點 定義：元素變換的基準點 語法： transform-origin：水平方向 垂直方向 參數說明： left top 左上角 ----四個角均可以 25% top 50px 50px 默認值： rotate 幾何中心點 skew 幾何中心點 scale 幾何中心點 translate 本身位置 2. 3d變換 1.開啟3d空間transform-style: preserve-3d; 一般給父元素開啟 2.子元素設置3d變換效果 rotate rotateX() 定義：指對象在X軸上的旋轉角度（變換基點： 50% 50% 0） rotateY() 定義：指對象在Y軸上的旋轉角度（變換基點： 50% 50% 0） rotateZ() 定義：指對象在Z軸上的旋轉角度（變換基點： 50% 50% 0） translate translateZ() 定義：指對象在Z軸上面的平移（變換基點： 50% 50% 0） scale scaleZ() 定義：指定對象的Z軸縮放（變換基點： 50% 50% 0）(無太大意義，開啟3d空間) 3.設置景深：實現近大遠小 父元素子元素都可以設置 父元素：perspective: 300px; 子元素: transform:perspective(300px) translateZ(-200px); 注意：景深：可選值：大于或等于0,景深值越大，元素看起來越大 默認值: 0 -- 沒有景深 （不能為負值） 4.變換基點 默認值： 50% 50% 0 transform-origin: top; 關鍵字表示 ( 50% 0 0 ) 注意：立體3d盒子 Z：只能使用具體的長度，不能使用百分比和關鍵字 5.景深中心點：改變觀察者視角 perspective-origin: top; perspective-origin: top right; 6.元素背面可見還是不可見 backface-visibility:visible ;（默認值：可見） backface-visibility: hidden; 不可見 ### 6. CSS3動畫 定義：使元素從一種樣式逐漸變化到另外一種樣式的效果 @keyframes 定義：keyframes關鍵幀，用來決定動畫變化的關鍵位置 注意：keyframes 控制關鍵位置，并不是所有的位置 語法：@keyframes animationname{ keyframes-selector{ cssStyles; } } animationname：必寫項，定義動畫的名稱 keyframes-selector：必寫項，動畫持續時間的百分比 0% - 100%之間， 或者使用form和to關鍵字也可以設置，form代表0%，to代表100% 示例： @keyframes abc { from{transform: rotate(0)} 50%{transform:rotate(90deg)} to{transform: rotate(360deg)} } animation屬性 * 1.animation-name屬性 設置對象所應用的動畫名稱 語法： animation-name：keyframename | none 參數說明： keyframename：指定要綁定到選擇器的關鍵幀的動畫名稱 * 2.animation-duration屬性 定義：設置對象動畫的持續時間 語法：animation-duration：time 參數說明：指定對象播放完成需要花費的時間，默認值是0 * 3.animation-timing-function屬性 定義：設置對象動畫的過渡類型 參數說明：與transition-timing-function屬性的參數一樣 * 4.animation-delay屬性 定義：設置動畫的延遲時間 語法：animation-delay：time 參數說明：可選值，定義動畫開始前等待的時間，以秒或者毫秒數計數，默認值是0 * 5.animation-iteration-count屬性 定義：設置對象動畫的循環次數 語法：animation-iteration-count ： infinite | number 參數說明： number為數字，其默認值是1 infinite：無限循環次數 * 6.animation-direction屬性 定義：設置對象動畫是否反向運動 語法： animation-direction：normal , reverse , alternate , alternate-reverse 參數說明： normal : 正常方向 reverse :反向運動 alternate ： 先正常運動在反向運動，并持續交替運行， 需要配合循環屬性使用 alternate-reverse ： 先反向運動在正常運動，并持續交替運行， 需要配合循環屬性使用 * 7.animation-play-state屬性 定義：指定對象是否正在運行或已暫停 語法：animation-play-state：paused | running 參數說明： paused ： 指定暫停動畫 running : 默認值，制定正在運行的動畫 示例：鼠標移動到box上暫停動畫 #box:hover{ animation-play-state: paused; } * 8.animation-fill-mode 設置動畫結束后的狀態 none：默認值。不設置對象動畫之外的狀態，DOM未進行動畫前狀態 forwards：設置對象狀態為動畫結束時的狀態，100%或to時，當設置animation-direcdtion為reverse時動畫結束后顯示為keyframes第一幀 backwards：設置對象狀態為動畫開始時的狀態,（測試顯示DOM未進行動畫前狀態） both：設置對象狀態為動畫結束或開始的狀態，結束時狀態優先 * 9.animation復合屬性（不推薦使用 ） 語法： animation ： name duration timing-function delay interation-count direction play-state 注意：在css3里面，給元素設置圓角、陰影、變換等屬性時，盡管外形位置發生改變，但是元素本身大小和位置不變