CSS3 是最新的 CSS 標準

CSS 用於控制網頁的樣式和佈局。
CSS3 是最新的 CSS 標準。
CSS3被拆分爲"模塊"。舊規範已拆分成小塊，還增加了新的。
一些最重要CSS3模塊如下：
選擇器
盒模型
背景和邊框
文字特效
2D/3D轉換
動畫
多列布局
http:/ /www.iis7.com/b/wzjk/
用戶界面
：
css3邊框：
border-radius：屬性被用於創建圓角
box-shadow：屬性被用來添加陰影(1.位置左右 2.位置上下 3.模糊程度 4.顏色)
border-image:url("圖片")：屬性用於設置圖片的邊框(用圖片做邊框)
選擇器:not(:last-child) { border-方向: none}，禁止邊框出現雙邊線。
：
css3圓角：(順序：上右下左)
使用 CSS3 border-radius 屬性，你可以給任何元素製作 "圓角"
四個值：第一個值爲左上角，第二個值爲右上角，第三個值爲右下角，第四個值爲左下角。
三個值：第一個值爲左上角, 第二個值爲右上角和左下角，第三個值爲右下角
兩個值：第一個值爲左上角與右下角，第二個值爲右上角與左下角
一個值：四個圓角值相同
border-top-left-radius：定義了左上角的弧度
border-top-right-radius：定義了右上角的弧度
border-bottom-right-radius：定義了右下角的弧度
border-bottom-left-radius：定義了左下角的弧度
：
css3背景：
background-image：(url),屬性添加背景圖片
background-size：指定背景圖像的大小
background-Origin：屬性定位了背景圖像的位置區域
background-clip：背景剪裁屬性是從指定位置開始繪製，
border-box：默認值。背景繪製在邊框方框內（剪切成邊框方框）。
padding-box：背景繪製在襯距方框內（剪切成襯距方框）。
content-box：背景繪製在內容方框內（剪切成內容方框）。
content-box，padding-box，和 border-box，區域內可以放置背景圖像。
：
css3漸變：
CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。
用幾種顏色就寫幾種
CSS3 定義了兩種類型的漸變（gradients）：
線性漸變（Linear Gradients），默認情況下-從上到下
徑向漸變（Radial Gradients）
Linear Gradients線性漸變- 向下/向上/向左/向右/對角方向(+to)
從哪個方向就在前面定義哪個方向，在最後的顏色上加+"to"
線性漸變 - 對角
你可以通過指定水平和垂直的起始位置來製作一個對角漸變。
定義一個角度(background: linear-gradient(角度 如從：left top到to bottom right)
角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將創建一個從下到上的漸變，90deg 將創建一個從左到右的漸變。不均勻分佈用百分比如:red 10%
線性漸變 - 透明度
漸變也支持透明度（transparent），可用於創建減弱變淡的效果
我們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最後一個參數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明
repeating-linear-gradient(顏色，顏色) 用於重複漸變
Radial Gradients徑向漸變
由它們的中心定義
默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）
shape 參數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse
closest-side
farthest-side
closest-corner
farthest-corner
repeating-radial-gradient(顏色，顏色) 函數用於重複徑向漸變：
：
css3文本效果：
text-shadow：屬性適用於文本陰影(值。1.左右，2.上下，3.模糊程度，4.顏色)
你也可以在 ::before 和 ::after 兩個僞元素中添加陰影效果
box-shadow ：屬性適用於盒子陰影
Text-Overflow：屬性文本溢出
text-overflow:ellipsis：(省略號)
text-overflow:clip：
white-space: nowrap：強制不換行
word-wrap：強制換行
break-word：換行
word-break: keep-all：單詞拆分換行
word-break: break-all：長文本換行br/>：
css3字體：
@font-face
font-family字體
font-weight:bold粗體文本
：
CSS3 2D 轉換
可以對元素進行移動、縮放、轉動、拉長或拉伸。
轉換的效果是讓某個元素改變形狀，大小和位置。
您可以使用 2D 或 3D 轉換來轉換您的元素
transform ：適用於2D或3D轉換的元素
transform-origin ：允許您更改轉化元素位置
您將瞭解到以下5種2D變換方法：
語法：transform:以下的幾種變換方法()
transform：translate(左右值，上下值)方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。
transform：rotate(旋轉的值#deg)方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
transform：scale((寬度)左右放大和縮小的值，(高度)上下放大和縮小的值))方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數。
transform：skew(x軸的傾斜角度deg，y軸的傾斜角度deg)包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數爲空，則默認爲0，參數爲負表示向相反方向傾斜
transform：matrix(1.2.3.4.5.6.)方法和2D變換方法合併成一個，有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能
:
CSS3 3D 轉換
使用 3D 轉換來對元素進行格式化。
您將瞭解到以下的 3D 轉換方法：
rotateX())方法，圍繞其在一個給定度數X軸旋轉的元素。
rotateY()方法，圍繞其在一個給定度數Y軸旋轉的元素。
transform-style: preserve-3d ：規定被嵌套元素如何在 3D 空間中顯示。
perspective ：規定 3D 元素的透視效果。
perspective-origin ：規定 3D 元素的底部位置。
backface-visibility ：定義元素在不面對屏幕時是否可見。
：
CSS3 過渡(transition)。(元素轉換效果的速度的快慢)
CSS3中，我們爲了添加某種效果可以從一種樣式轉變到另一個的時候，無需使用Flash動畫或JavaScript。
CSS3 過渡是元素從一種樣式逐漸改變爲另一種的效果。
要實現這一點，必須規定兩項內容：
1.指定要添加效果的CSS屬性
2.指定效果的持續時間。
如果未指定的期限，transition將沒有任何效果，因爲默認值是0。
transition-property，規定應用過渡的 CSS 屬性的名稱。
transition-duration，定義過渡效果花費的時間。默認是 0。
transition-delay，指定多少時間後切換效果開始。
transition-timing-function ，規定過渡效果的時間曲線。默認是 "ease"。
transition-timing-function : linear，規定以相同速度開始至結束的過渡效果
transition-timing-function : ease，規定慢速開始，然後變快，然後慢速結束的過渡效果
transition-timing-function : ease-in，規定以慢速開始的過渡效果
transition-timing-function : ease-out，規定以慢速結束的過渡效果
transition-timing-function : ease-in-out，規定以慢速開始和結束的過渡效果
：
CSS3 動畫
我們可以創建動畫，它可以取代許多網頁動畫圖像，Flash動畫，和JAVAScripts。
@keyframes 規則，要創建CSS3動畫，你將不得不瞭解@keyframes規則。
@keyframes規則是創建動畫。 @keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改爲新的樣式。
當在 @keyframes 創建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：
1.規定動畫的名稱
2.規定動畫的時長
您必須定義動畫的名稱和動畫的持續時間。如果省略的持續時間，動畫將無法運行，因爲默認值是0
動畫效果是什麼？？？：
動畫是使元素從一種樣式逐漸變化爲另一種樣式的效果。
您可以改變任意多的樣式任意多的次數。
請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。0% 是動畫的開始，100% 是動畫的完成。爲了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
改變元素的位置時要精確的定位
animation: "#"：綁定選擇器。"#"(選擇器)
@keyframes ：規定動畫。
animation ：所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name ：規定 @keyframes 動畫的名稱。
animation-duration ：規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
animation-timing-function ：規定動畫的速度曲線。默認是 "ease"。
animation-delay ：規定動畫何時開始。默認是 0。
animation-iteration-count ：規定動畫被播放的次數。默認是 1，infinite：指定動畫應該播放無限次（永遠）
animation-play-state：規定動畫是否正在運行或暫停。默認是 "running"。
animation-direction：規定動畫是否在下一週期逆向地播放。默認是 "normal"。
reverse：動畫反向播放
alternate：動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。
alternate-reverse：動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。
initial：設置該屬性爲它的默認值。
inherit：從父元素繼承該屬性。
infinite：無限旋轉。
linear：旋轉動畫加它，更加流暢。
：
CSS3 多列
我們將學習以下8個 CSS3 的多列屬性:
column-count ：屬性指定了需要分割的列數。
column-gap：屬性指定了列與列間的間隙。
column-rule-style：屬性指定了列與列間的邊框樣式。
column-rule-width：屬性指定了兩列的邊框厚度。
column-rule-color： 屬性指定了兩列的邊框顏色。
column-rule：屬性是 column-rule-* 所有屬性的簡寫。
column-span：屬性跨越所有列。
column-width： 屬性指定了列的寬度。
column-fill：指定如何填充列。
columns 設置 column-width 和 column-count 的簡寫。
：
CSS3 用戶界面
在 CSS3 中, 增加了一些新的用戶界面特性來調整元素尺寸，框尺寸和外邊框。
您將瞭解以下的用戶界面屬性：
resize：屬性指定一個元素是否應該由用戶去調整大小。
box-sizing：屬性允許您以確切的方式定義適應某個區域的具體內容。
outline-offset：屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。
輪廓與邊框有兩點不同：1.輪廓不佔用空間。2.輪廓可能是非矩形
appearance：允許您使一個元素的外觀像一個標準的用戶界面元素。
icon：爲創作者提供了將元素設置爲圖標等價物的能力。
nav-down：指定在何處使用箭頭向下導航鍵時進行導航
nav-index：指定一個元素的Tab的順序
nav-left：指定在何處使用左側的箭頭導航鍵進行導航
nav-right：指定在何處使用右側的箭頭導航鍵進行導航
nav-up :指定在何處使用箭頭向上導航鍵時進行導航
：
CSS 圖片
border-radius：屬性來創建圓角圖片，可用百分比，橢圓。
border：屬性來創建縮略圖。先創建邊框，在寫內邊距。
響應式圖片，響應式圖片會自動適配各種尺寸的屏幕。例如：{max-width: 100% ; height: auto;}
圖片文本，如何定位圖片文本: 就是在圖片上寫字。
圖片濾鏡，filter：屬性用爲元素添加可視效果 (例如：模糊與飽和度) 。
filter : grayscale(100%)，把圖片變黑白色
filter : blur()，把圖片變模糊
filter : brightness()，圖片的亮度
filter : contrast()，圖片的對比度
filter : drop-shadow()，圖片陰影
filter : hue-rotate()，改變圖片的色相
filter : invert()，反相
filter : opacity()，圖片的透明度
filter : saturate()，圖片的飽和度
filter : sepia()，圖片深褐色
filter : url()，圖片地址
圖片 Modal(模態)
CSS 和 JavaScript 來一起渲染圖片。
首先，我們使用 CSS 來創建窗口 (對話框), 默認是隱藏的。
然後，我們使用 JavaScript 來顯示模態窗口，當我們點擊圖片時，圖片會在彈出的窗口中顯示
：
CSS 按鈕
background-color：屬性來設置按鈕顏色:
font-size：屬性來設置按鈕大小:
border-radius：屬性來設置圓角按鈕:
border：屬性設置按鈕邊框顏色:
我們可以使用 :hover 選擇器來修改鼠標懸停在按鈕上的樣式。
提示: 我們可以使用 transition-duration 屬性來設置 "hover" 效果的速度：
box-shadow：屬性來爲按鈕添加陰影:
我們可以使用 opacity 屬性爲按鈕添加透明度 (看起來類似 "disabled" 屬性效果)。
提示: 我們可以添加 cursor 屬性並設置爲 "not-allowed" 來設置一個禁用的圖片：
移除外邊距並添加 float:left 來設置按鈕組：
按鈕動畫
：
CSS 分頁
可以使用 .active 來設置當期頁樣式，鼠標懸停可以使用 :hover 選擇器來修改樣式：
可以使用 border-radius 屬性爲選中的頁碼來添加圓角樣式:
可以通過添加 transition 屬性來爲鼠標移動到頁碼上時添加過渡效果:
我們可以使用 border 屬性來添加帶邊框分頁:
可以使用 margin 屬性來爲每個頁碼直接添加空格：
可以使用 font-size 屬性來設置分頁的字體大小:
：
CSS3 框大小
box-sizing 屬性可以設置 width 和 height 屬性中包含了 padding(內邊距) 和 border(邊框)。
默認情況下，元素的寬度與高度計算方式如下：
width(寬) + padding(內邊距) + border(邊框) = 元素實際寬度
height(高) + padding(內邊距) + border(邊框) = 元素實際高度
這就意味着我們在設置元素的 width/height 時，元素真實展示的高度與寬度會更大(因爲元素的邊框與內邊距也會計算在 width/height 中)。
CSS3 box-sizing 屬性在一個元素的 width 和 height 中包含 padding(內邊距) 和 border(邊框)。
如果在元素上設置了 box-sizing: border-box; 則 padding(內邊距) 和 border(邊框) 也包含在 width 和 height 中:
：
CSS3 彈性盒子(Flex Box)
彈性盒子是 CSS3 的一種新的佈局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。
引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
CSS3 彈性盒子內容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設置 display 屬性的值爲 flex 或 inline-flex將其定義爲彈性容器。
彈性容器內包含了一個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局。
彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。
direction 屬性爲 rtl (right-to-left),彈性子元素的排列方式也會改變，頁面佈局也跟着改變:
flex-direction 屬性指定了彈性子元素在父容器中的位置。
語法 : flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row：橫向從左到右排列（左對齊），默認的排列方式。
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。
justify-content 屬性:
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿着彈性容器的主軸線（main axis）對齊。
語法：justify-content: flex-start | flex-end | center | space-between | space-around
各個值解析:
flex-start：
彈性項目向行頭緊挨着填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。
flex-end：
彈性項目向行尾緊挨着填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。
center：
彈性項目居中緊挨着填充。（如果剩餘的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
space-between：
彈性項目平均分佈在該行上。如果剩餘空間爲負或者只有一個彈性項，則該值等同於flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩餘的彈性項分佈在該行上，相鄰項目的間隔相等。
space-around：
彈性項目平均分佈在該行上，兩邊留有一半的間隔空間。如果剩餘空間爲負或者只有一個彈性項，則該值等同於center。否則，彈性項目沿該行分佈，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
align-items 屬性：
align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
語法：align-items: flex-start | flex-end | center | baseline | stretch
各個值解析:
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
flex-wrap 屬性：
flex-wrap 屬性用於指定彈性盒子的子元素換行方式。
語法：flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各個值解析:
nowrap - 默認， 彈性容器爲單行。該情況下彈性子項可能會溢出容器。
wrap - 彈性容器爲多行。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
wrap-reverse -反轉 wrap 排列。
align-content 屬性：
align-content 屬性用於修改 flex-wrap 屬性的行爲。類似於 align-items,但它不是設置彈性子元素的對齊，而是設置各個行的對齊。
語法：align-content: flex-start | flex-end | center | space-between | space-around | stretch
各個值解析:
stretch - 默認。各行將會伸展以佔用剩餘的空間。
flex-start - 各行向彈性盒容器的起始位置堆疊。
flex-end - 各行向彈性盒容器的結束位置堆疊。
center -各行向彈性盒容器的中間位置堆疊。
space-between -各行在彈性盒容器中平均分佈。
space-around - 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。
align-self
align-self 屬性用於設置彈性元素自身在側軸（縱軸）方向上的對齊方式。
語法：align-self: auto | flex-start | flex-end | center | baseline | stretch
各個值解析:
auto：如果'align-self'的值爲'auto'，則其計算值爲元素的父元素的'align-items'值，如果其沒有父元素，則計算值爲'stretch'。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
flex
flex 屬性用於指定彈性子元素如何分配空間。
語法：flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各個值解析:
auto: 計算值爲 1 1 auto
initial: 計算值爲 0 1 auto
none：計算值爲 0 0 auto
inherit：從父元素繼承
[ flex-grow ]：定義彈性盒子元素的擴展比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的默認基準值。
display：指定 HTML 元素盒子類型。
flex-direction：指定了彈性容器中子元素的排列方式
justify-content：設置彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items：設置彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-wrap：設置彈性盒子的子元素超出父容器時是否換行。
align-content：修改 flex-wrap 屬性的行爲，類似 align-items, 但不是設置子元素對齊，而是設置行對齊
flex-flow：flex-direction 和 flex-wrap 的簡寫
order：設置彈性盒子的子元素排列順序。
align-self：在彈性子元素上使用。覆蓋容器的 align-items 屬性。
flex：設置彈性盒子的子元素如何分配空間。
：
CSS3 多媒體查詢
@media 規則在 CSS2 中有介紹，針對不同媒體類型可以定製不同的樣式規則。
例如：你可以針對不同的媒體類型(包括顯示器、便攜設備、電視機，等等)設置不同的樣式規則。
但是這些多媒體類型在很多設備上支持還不夠友好。
CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的所有思想： 取代了查找設備的類型，CSS3 根據設置自適應顯示。
媒體查詢可用於檢測很多事情，例如：
viewport(視窗) 的寬度與高度
設備的寬度與高度
朝向 (智能手機橫屏，豎屏) 。
分辨率
目前很多針對蘋果手機，Android 手機，平板等設備都會使用到多媒體查詢。
多媒體查詢由多種媒體組成，可以包含一個或多個表達式，表達式根據條件是否成立返回 true 或 false。
如果指定的多媒體類型匹配設備類型則查詢結果返回 true，文檔會在匹配的設備上顯示指定樣式效果。
除非你使用了 not 或 only 操作符，否則所有的樣式會適應在所有設備上顯示效果。
not: not是用來排除掉某些特定的設備的，比如 @media not print（非打印設備）。
only: 用來定某種特別的媒體類型。對於支持Media Queries的移動設備來說，如果存在only關鍵字，移動設備的Web瀏覽器會忽略only關鍵字並直接根據後面的表達式應用樣式文件。對於不支持Media Queries的設備但能夠讀取Media Type類型的Web瀏覽器，遇到only關鍵字時會忽略這個樣式文件。
all: 所有設備，這個應該經常看到。
CSS3 多媒體類型：
all 用於所有多媒體類型設備
print：用於打印機
screen：用於電腦屏幕，平板，智能手機等。
speech ：用於屏幕閱讀器
使用多媒體查詢可以在指定的設備上使用對應的樣式替代原有的樣式
。。。。。。
瀏覽器兼容
-ms-代表IE內核識別碼
-moz-代表火狐內核識別碼
-webkit-代表谷歌內核識別碼
-o-代表歐朋opera內核識別碼
由於瀏覽器內核不同，爲了兼容多個瀏覽器而使用-webkit- 等 。
改變表單裏面的字的樣式可以用這個方法：input::-webkit-input-placeholder