8.1 盒子新特性
8.1.1 盒子陰影 box-shadow
屬性：box-shadow
作用：用於設定一個盒子的陰影效果
形式：box-shadow：水平偏移值 垂直偏移值 [模糊值] [外延值] [顏色] [inset]；
說明：
1，至少設置兩個長度值，分別表示陰影的水平偏移量和垂直偏移量，可以爲負；
2，模糊值是設定陰影的模糊效果的寬度，可以不設置，則默認爲0；
3，外延值是設定陰影再“擴大”的寬度，可以不設置，則默認爲0；
4，inset表示設置“內陰影”，可以不設置，則默認爲外陰影。
8.1.2 圓角邊框 border-radius
屬性：border-radius
作用：用於設定一個盒子的圓角特性。
形式：border-radius: 水平圓角半徑 [/ 垂直圓角半徑]；
說明：
1，垂直半徑可以省略，則其同水平半徑的值。
2，半徑設置可以提供1~4個值，具體如下。
提供1個：4個角都爲該值；
提供2個：第1個表示上左和下右，第2個表示上右和下左；
提供3個：第1個表示上左，第2個表示上右和下左；第3個表示下右；
第供4個：分別代表4個角上的半徑（依次上左，上右，下右，下左）
8.1.3 圖像邊框border-image
邊框背景的主要屬性有：
border-image-source: 設置作爲邊框背景的圖片源；
border-image-slice: 設置要將邊框背景圖片進行“切割”的分割方式。形式爲：
border-image-slice: 數值 [fill]; //特別注意：這裏的數值不帶單位！
其中“數值”可以是1-4個值，分別代表上右下左4個方向的“切割厚度”。
fill代表“填充”，用於中間區域填充到盒子內容區。
border-image-width: 設置圖片邊框的寬度，也可以設定1-4個值。
通常設定爲auto（自動），此時就會使用border-image-slice所設定的切割厚度。
border-image-repeat: 設置邊框背景的填充方式，可以設定1-2個值，表示橫向和縱向的填充方式。
可用值如下：
stretch： 指定用拉伸方式來填充邊框背景圖，這是默認值，也最常用，推薦使用。
repeat： 指定用重複平鋪方式來填充邊框背景圖。類似背景圖的repeat，背景圖不改變大小。
round： 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小直至正好可以鋪滿整個邊框。
space： 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的之間的間距直至正好可以鋪滿整個邊框。
注：有的瀏覽其中應用邊框圖屬性需同時設定border屬性。
8.1.4 背景圖高級特性
前面有關一個盒子的背景設置，我們主要學習了這幾個基本屬性：
background-color: 設置背景顏色。
background-image: 設置背景圖像源文件。
background-repeat: 設置背景圖像的重複性，可用值：repeat, no-repeat, repeat-x, repeat-y。
background-position: 設置背景圖片起始位置或定位位置。
background: 上述幾個屬性的綜合屬性。
有關盒子的背景設置，在CSS3中，又增加了幾個屬性，如下所示：
background-attachment：
設置背景圖像的滾動特性，可用值有：
scroll： 相對於當前盒子固定（盒子滾動，則背景圖也會滾動），這是默認值。
local： 相對於當前盒子的內容固定（內容滾動，則背景圖也會滾動）。
fixed： 相對於當前瀏覽器窗體固定（類似固定定位，即它會始終在窗口的某個位置）。
background-origin:
設置背景圖像的參考原點（位置），實際就是背景出現的範圍。可用值有：
border-box： 在boder區域範圍內（含border）。
padding-box：在padding區域範圍內（含padding），這是默認值。
content-box： 在內容區域範圍內。
此屬性主要是跟background-position的位置計算有關。
background-clip:
設置背景圖像向外裁剪的區域，裁剪範圍以外就被裁剪了(不顯示)。可用值有：
border-box： 從border區域外沿（即不含border）開始向外裁剪背景，這是默認值。
padding-box：從padding區域外沿（即不含padding）開始向外裁剪背景。
content-box： 從content區域外沿開始向外裁剪背景。
background-size: 值1 [, 值2]
設置背景圖像的大小，可設置2個值，分別表示橫向和縱向的大小。可用值有：
長度： 用長度值指定背景圖像大小。不允許負值。
百分比： 用百分比指定背景圖像的縮放大小。不允許負值。
auto： 背景圖像的真實大小。
cover： 將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
contain： 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像不超出容器。
8.1.5 漸變背景 gradient
漸變背景其實是設置background-image屬性的值，設置的不是一個單一顏色，而是多個顏色，並按給定方式進行漸變。
8.1.5.1線性漸變linear-gradient
含義：線性漸變是讓背景顏色按照某個方向（角度）的方式來進行過渡變化。
語法： background-image：linear-gradient([角度，] 顏色1，顏色2 [，顏色n...] );
說明：
1，角度以從下到上（12點整的方向）爲0度，順時針爲正角度，默認爲180度。
2，角度還可以使用to left，to right，to top， to bottom這幾個關鍵字；
2，至少設置2個顏色（這樣才能實現漸變）；可設置多個顏色，都能自動實現漸變；
3，每個顏色還可以設置“截止位置”，表示該顏色在漸變中的“關鍵點”（位置），形式爲：顏色 位置，比如：red 30px; 或 #00ff00 20%;
8.1.5.2 徑向漸變radial-gradient
含義： 徑向漸變是讓背景顏色從某個中心點以圓或橢圓向外擴散的方式來進行過渡變化。
語法： background-image：radial-gradient( 形狀 [at 位置，] 顏色1，顏色2 [，顏色n...])
說明：
1，形狀可以是circle（圓）或ellipse（橢圓），默認是跟隨盒子（可能是圓，也可能是橢圓）；
2，大小是指漸變從圓心開始向外進行過渡變化的距離（半徑），圓用一個值，橢圓用2個值（空格隔開）；
大小還可以使用如下4個關鍵字：
farthest-corner： 最遠角，表示從圓心開始，漸變到最遠的角的位置。下面也類似；
farthest-side： 最遠邊；
closest-corner： 最近角；
closest-side： 最近邊；
3，位置可以是一個值（表示橫座標，縱座標默認居中），或2個值（橫縱座標，空格隔開）；位置還可以使用top， right， bottom，left，center這5個關鍵字；
4，顏色至少包含2個，每個顏色還可以設定“截止位置”；
8.2 多欄佈局 column
8.2.1 基本概念
所謂多欄佈局，就是一個盒子設置欄寬屬性或欄數量屬性，就構成多欄佈局，則其中的內容，會先在第一欄展示，第一欄展示滿後，再展示到第二欄，以此類推。
多欄佈局最常見的就是雜誌或報紙上常見的“分欄版面”。比如雜誌最常用的是分爲兩欄。
多欄佈局通常用於盒子內部主要以文字（行內元素）爲主的情形。
給一個盒子設定欄寬屬性或欄數量屬性（二選一），就可以實現多欄佈局效果。
8.2.2 主要屬性
欄寬度屬性column-width
設定分欄佈局中一個欄的寬度值；實際寬度會根據外層盒子的寬度有所調整（可能變大）。
欄數量屬性column-count
設定分欄佈局中的總欄數。
columns屬性：
上述column-width和column-count的綜合屬性；
使用形式：columns: 欄寬值 欄目數；
實際表現上，當總寬度大於等於“欄寬x欄目數”時，欄目數固定，欄寬可能會有所調整（變大）。
當總寬度小於“欄寬x欄目數”時，欄目數會減少（保證欄寬不小於設定的欄寬）。
欄間隙屬性column-gap
設定欄與欄之間的寬度值，默認是font-size大小（比如14px）
欄分割線屬性column-rule
欄分割線屬性，就是兩欄之間的線，如果不設定默認就是“空的”，就沒有分割線，只有間隙（gap）。
欄分割線屬性類似邊框線（但只是一條線），可以設定：線寬，線型，線色。
有如下幾個屬性：
column-rule-width：設定線寬，比如1px，5px；
column-rule-style：設定線型，比如solid，dashed，dotted；
column-rule-color：設定線色，比如red， #ff9966， rgb(200,100,0)
column-rule：上述3個屬性的綜合屬性。
8.3 彈性佈局 flex
8.3.1 基本概念
彈性佈局是指，可以設定一個容器盒子中的若干個（數量可變的）子盒子，在父盒子中的橫向或縱向有序整齊排列。其典型應用就是頁面中的導航佈局的實現
彈性佈局的實現，主要是在父盒子（容器盒子）上定義相應的屬性，則其內部的子盒子就能夠按照所定義的樣式進行顯示。
8.3.2 主要屬性
彈性佈局的主要屬性設置包括如下幾個：
display: flex;
說明：設置盒子的顯示模式爲彈性盒模型，即該盒子成爲了彈性盒模式的容器盒子。
flex-direction:
說明：設置彈性盒模式的子盒子的排列方式，有如下4個方式（4個屬性值）：
row：橫向排列，
row-reverse：橫向排列，但順序反向
column：縱向排列
column-reverse：縱向排列，但順序反響
flex-wrap：
說明：設置彈性盒模式的子盒子超出時的換行特性，常用屬性值有：
nowrap：不換行，儘量在一行顯示，這是默認值。
此時有可能會超出父盒子（當子盒子有最小寬度設置時）。
wrap：自動換行。
wrap-reverse：換行，但反向顯示（即其實顯示到上一行去了）
justify-content：設定的是一行中子盒子在主軸方向的排布方式
說明：設置子盒子的主軸方向的一行中的排布方式。
所謂主軸就是由flex-direction所決定的方向爲主軸，對應另一個方向爲輔軸。
假如flex-direction爲row或row-reverse，則橫向爲主軸，縱向爲輔軸。
假如flex-direction爲column或column-reverse，則縱向爲主軸，橫向爲輔軸。
常用屬性值有：
flex-start：子盒子從所設定的起始位置開始排列出來，空隙留後面；
flex-end：子盒子從所設定的終止位置開始排列出來，空隙留前面；
center：子盒子完全從居中的位置開始排列出來，空隙留兩邊；
space-between：子盒子兩邊緊靠父盒子，空隙留在相互的中間且均等；
space-around：子盒子均衡佈置，分佈給每個盒子的空隙都一樣。
align-content： 設定的是多行情況下"行"在輔軸方向的排布方式
說明：設置子盒子在輔軸方向的排布方式，大於一行且輔軸有多餘空間時時纔有效。
常用的屬性值有：
flex-start：子盒子從所設定的起始位置開始排列出來，空隙留後面；
flex-end：子盒子從所設定的終止位置開始排列出來，空隙留前面；
center：子盒子完全從居中的位置開始排列出來，空隙留兩邊；
space-between：子盒子兩邊僅靠父盒子，空隙留在相互的中間；
space-around：子盒子均衡佈置，空隙均衡出現；
align-items： 設定的是一行中的多個子盒子在輔軸方向的排布方式
說明：設置子盒子在當前行中輔軸方向的對齊方式。
flex-start：子盒子定位於所設定的起始位置，空隙留後面；
flex-end：子盒子定位於設定的終止位置，空隙留前面；
center：子盒子定位於居中的位置，空隙留兩邊；
baseline：子盒子定位於基準位置；
stretch：子盒子進行拉伸（充滿縱軸）；
8.4 2D變換 transform(2D)
8.4.1 基本概念
2D變換的基本含義是：將瀏覽器頁面（電腦屏幕所在面）當做一個二維平面，然後，通過CSS的設置，使網頁元素能夠在這個平面上進行“形狀變換”。
簡單說就是，在一個元素的“本來”外觀表現上，可以對其實行：位移，旋轉，縮放，斜拉變形等。
8.4.2 主要屬性
transform：
這是最主要的變換屬性；其實所有變換都是通過這個屬性，使用不同的值來實現的。
而所用不同的值，主要就是指定不同的變換函數（一個單詞），以及所需要變換的數值；
常用2D變換形式如下：
transform: translatex(值)： 將元素水平移動給定的值；
transform: translatey(值)： 將元素垂直移動給定的值；
transform: translate(x值，y值)： 同時進行水平和垂直移動；
transform: rotate(角度值)： 將元素旋轉給定的角度；
旋轉的方向是：正值爲順時針方向，負值爲逆時針方向；
transform: scalex(比例值)： x方向進行縮放；
transform: scaley(比例值)： y方向進行縮放；
transform: scale(x比值, y比值): 同時進行水平和垂直方向的縮放；
transform: skewx(角度值)： 將元素從x方向拉伸給定的角度；
transform: skewy(角度值)： 將元素從y方向拉伸給定的角度；
transform: skew(x角度,y角度): 將元素從x和y方向拉伸給定的角度；
特別注意：
1，對一個元素可以同時進行多項變換。
2，進行多項變換時，多個變換屬性值要一併寫在一起，相互之間用空格隔開，類似這樣：
transform: translatex(5px) translatey(10px) rotate(20deg) scale(1.5, 2);
3，對於進行了變換的元素，雖然形狀或位置都可能變了，但並不影響其他元素(即不影響佈局效果)。
transform-origin：
指定變換時的“原點”（基點）；默認是該變換元素的“中心點”（center, center）；形式：
transform-origin：水平座標 垂直座標；
其中： 水平座標可以用一個長度值，或百分比，或left，center，right；
垂直座標可以用一個長度值，或百分比，或top，center，bottom；
8.5 3D 變換 transform(3D)
8.5.1 基本概念
3D變換是在2D變換的基礎上，再加上一個維度（z軸），構成了三維空間。
新加上的這個z軸，是跟網頁頁面（電腦屏幕）垂直的那個方向，也就是眼睛到屏幕的“垂直線”。
z軸的正方向是從屏幕到眼睛的方向
8.5.2 主要屬性
3D變換仍然還使用2D變換的2個屬性（transform和transform-origin），不過在transform的屬性值中，又增加了若干變換函數，以達到在3D空間中將盒子進行某種變換操作的目的。
另外，對於3D變換，還會多出來幾個屬性，分別用於設定3D變換場景下所需要的一些特徵信息。
3D變換的主要屬性有：
transform-style：
用於設定元素變換的方式（2D還是3D），默認是flat（平面，也就是2D）；
設置爲preserve-3d，就可以實現3D變換。
注意：該屬性應該設置在變換元素的父級元素上。
perspective：
透視距離，用於設定觀察3D視圖時眼睛離屏幕（也就是z=0）的距離，即觀察點的遠近。
默認透視距離是“無窮大”，即最遠處。
注意：該屬性應該設置在變換元素的上級元素上。
perspective-origin：
透視點，即觀察3D視圖時眼睛的位置，也就是眼睛直對屏幕的那個點在（x，y）座標系上的座標值。
默認爲（center，center），也就是父元素的中心點。
注意：該屬性應該設置在變換元素的上級素上。
transform-orgin
含義跟2D變換一樣，用於指定元素變換時的“原點”（基點）；
transform
含義跟2D變換一樣，只是多了一些有關3D變換的變換函數，主要有：
translateX(x), translateY(y), translateZ(z), translate3d(x, y, z)： 移動變換
rotateX(x角度), rotateY(y角度), rotateZ(z角度), rotate3d(x, y, z, deg)：旋轉變換；其旋轉規則爲：
左手“抓住”某軸，大拇指指向該軸正方向，則正值會沿其餘手指的方向旋轉，否則相反；
rotate3d中，x，y，z是數值，是相對大小，deg纔是角度。
scaleX(x), scaleY(y), scaleZ(z), scale3d(x, y, z)：縮放變換
8.6 過渡效果 transition
8.6.1 基本概念
過渡（transition）是指，能夠讓一個元素的屬性，從某個值，變換到另一個值的時候，不是表現爲“立即實現”（突然變化），而是表現爲“逐步變化”，則視覺效果看起來就是“動畫效果”了。
過渡效果在應用中通常結合鼠標的動作而展現出來，最常見的就是使用“:hover”僞類。
過渡效果的設置主要設置如下幾項：
參與過渡的屬性名，過渡的時長，過渡的方式，以及過渡發生前的延遲時間。
8.6.2 主要屬性
transition-property：要用於實現過渡的屬性名；
transition-duration：過渡時長；比如：2s；
transition-timing-function：過渡方式；常用的過渡方式如下所示：
linear：線性過渡。
ease：平滑過渡，這是默認值
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
transition-delay：過渡效果發生前的延遲時長，比如：1s。
transition：以上4屬性的綜合屬性，並可以設定多屬性過渡（比如位置和顏色同時變化)，形式如下：
transition：第1個過渡 [，第2個過渡] [，第3個過渡] [......]；
每個過渡的形式爲：過渡屬性名 過渡時長 [過渡方式] [延遲時長]；
8.7 動畫效果 animation
8.7.1 基本概念和語法
動畫效果其實可以看着過渡效果的昇華版：
過渡效果是實現元素在某個（或某些）屬性的兩個不同值之間的狀態變化效果；
動畫效果是預先定義好某個（或某些）屬性的多個不同值之間的狀態變化效果，並對之命名，而後可多次應用在不同的元素上。
簡單說就是：
過渡效果是“實現某元素的某種狀態變化效果”，
動畫效果是“定義某種狀態變化效果，並可拿來用”。
8.7.2 主要屬性
animation-name：動畫名；
animation-duration：動畫持續時間；
animation-timing-function：動畫播放播放方式（效果），也有如下幾個常用的效果名：
linear：線性過渡，就是勻速進行
ease：平滑過渡，這是默認值
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
animation-delay：動畫播放前的延遲時間；
animation-iteration-count：動畫播放循環次數，使用數字或infinite（無限）；
animation-direction：動畫播放方向（正向還是反向），可用的值有：
normal：常規（就是從前往後播放）
reverse：反向（就是從後往前播放）
alternate：交替（就是先從前往後，再從後往前），播放次數大於1次纔有意義
alternate-reverse：反向交替（就是先從後往前，再從前往後），播放次數大於1次纔有意義
animation-fill-mode：動畫停止（播放結束）時元素停留的狀態，可用的值有：
forwards： 停留在前面（動畫播放的結尾處）；
backwards： 停留在後面（動畫播放的開時處）；
both： 兩邊都可停（動畫停在哪邊就哪邊）；
animation-play-state：設置動畫啓動或暫停，有兩個可用的值：
running： 運行狀態（默認值），也就是運行動畫效果；
paused： 暫停狀態，也就是動畫效果運行中停下來（此時如果需要還可以繼續運行）；
animation：上述屬性的綜合屬性，並依次按該順序列出（不需要的項直接省略）；