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：長文本換行：
css3字體：
@font-face
br/>：
css3字體：
@font-face
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