被禁言了一天，555555 ，還是說有廣告，好吧，以後不帶連結了，兄弟們有更多問題的話，加關注，收藏，我們會持續的更新，一定讓大家能學會WEB前端開發。
本節提綱：
徑向漸變 重複漸變盒陰影 文字陰影蒙版 倒影
上節的作業，不知道兄弟們作的怎麼樣，過程中可能也遇到了各種各樣的問題，遇到問題，屬正常，堅持一下，就能學會了！革命尚未成功，同志仍需努力！再難也要堅持！
這節，我們繼續CSS3新增樣式
徑向漸變
徑向漸變：徑向漸變 ie9以下不支持 漸變都是背景下一個屬性 background：radial-gradient(at center,red,yellow,blue);
徑向漸變色從圓心往外進行漸變 括號裡的第一個值是圓心位置或者圓的形狀 圓的形狀 標準下 默認為橢圓 圓形：circle 標準之前 沒有設置 可以是模糊的值，也可以說具體的數值 標準下 模糊的值 at left at center at right at top at bottom 具體的數值 100px 200px 100px為X軸的偏移量 200px為Y軸的偏移量 從第二個值開始，是顏色值，顏色值可以無限的寫 顏色值可以通過具體的數值來規定漸變的區域或範圍 具體的數值可以是100px或百分比
重複漸變
background：repeating-radial-gradient(at center,red 10%,yellow 20%,blue 30%);
盒陰影
box-shadow 第一個值：默認省略或者inset可以省略，省略即為默認 處理盒子陰影在盒子的裡面還是外面 默認省略就是在外面 inset就是裡面 第二個值：具體的數值 可以正數，可以是負數，為盒子陰影X軸的大小 第三個值：具體的數值，可以是正數，也可以是負數，為盒子陰影Y軸的大小 第四個值：具體的數值 可以是正數，不可以說負數，可以省略 省略之後，沒有模糊面積 為盒子陰影模糊面積 第五個值：具體的顏色值，英文單詞 十六進位 rgb rgba 盒陰影可以不斷的添加，中間用逗號隔開。
文字陰影
text-shadow：10px 10px 8px #ccc 第一個值：具體的數值 可以說正數，也可以說負數 為盒子陰影X軸的大小 第二個值 具體的數值 可以說正數，也可以說負數 為盒子陰影Y軸的大小 第三個值：具體的數值 可以說正數，不可以是負數 可以省略 省略之後，沒有模糊面積 為盒子陰影模糊面積 第四個值：具體的顏色值，英文單詞 十六進位 rgb rgba 文字陰影值可以不斷的添加，中間用逗號隔開。
蒙版
-webkit-mask：url("img/1.png")目前只有-webkit-內核的瀏覽器支持，其他不支持 需要PNG的透明度遮罩 和背景設置一樣，可以設置多個png為蒙版
倒影
-webkit-box-relect：left right above below 10px linear-gradient(to top,rgba(255,255,255,1) 10px,rgba(255,255,255,0),) 30px；只有-webkit-內核瀏覽器支持 第一個值 控制倒影出現的位置 上above 下below 左 left 右right 第二個值倒影和本體之間間隔 為具體的數值 比如 10px -webkit--box-reflect：below 10px； 第三個值 可以透明度的漸變 也可以一個png透明的圖片連結 透明度的漸變 -webkit-box-reflect：left 10px url("img/1.png")
第十二章 媒體查詢 提綱
媒體查詢viewport 布局百分比圖片文字百分比 設備寬度自定義
從本節開始，我們就真正進入響應式布局了，其實相應式更多的關注的是瀏覽器兼容和用戶體驗，兼容是伴隨著我們整個過程中的東西。
用戶體驗：讓用戶從網際網路上獲取信息時候，能有一個良好的感受。
我們現在已經進入移動網際網路，帶給我們前端開發人員一個問題：讓用戶不僅在pc端獲取信息時候有一個良好感受，同樣，移動端，也有一個良好的感受，頁面能夠正常顯示信息。這就是我們需要做的事情：響應式布局。
響應式布局：同時在pc和移動端頁面顯示都美觀正常。實現方式就是媒體查詢。
@media screen and(max-width:960px){div{width:300px;height:600px;border:30px solid yellow; background:#000}}
當屏幕發生變化，根據設置的最大值寬度或者最小值寬度時，讀取大括號中的代碼。
@media screen and(當屏幕發生變化，最大寬度到達某一個值的時候，例：max-width:960px))，會執行相應代碼。
viewport 布局百分比
width:控制viewport的大小，可以指定一個數值或一個特殊的值 例：device-width就是設備的寬度 （單位為縮放100%的css像素）。
initial-scale：出事縮放，就是頁面開始縮放的程度，是一個浮點數 例：initial-scale=1.0，頁面開始的時候，就是1：1的比例
maximum-scale=1.0，minimum-scale=1.0 最大縮放/最小縮放，允許放大//縮小多少倍。
user-scalabe=no 是否允許用戶調整頁面 如果為yes 用戶可以改變 如果為no，用戶不可以改變 如果為no，用戶不能縮放，maximum-scale=1.0，minimum-scale=1.0會失效。
布局百分比
響應式布局/百分比布局
布局百分比 width padding-left padding-right margin-left margin-right left right
需要牢記的公式 目標元素的寬度/父級元素的寬度=百分比寬度
高度的增加或減少需要配合媒體查詢 @media screen and (max-width:900px) 高度 height padding-top padding-bottom margin-top margin-top margin-bottom top bottom
圖片文字百分比
圖片百分比：圖片的寬度和高度，比較彈性化 蹄片如果不設置寬高，會原始顯示，當設置了圖片的寬度百分比時，寬度發生變化，高度也會等比縮放(圖片有時候太大，會超出，最好設置一個上限值，max-width 或 max-height)
文字百分比：em 和 rem em父級的文字大小的倍數 父級大小是多少決定子級文字em的大小 rem就是針對html文字字體大小 一般響應式布局都是rem 通過媒體查詢該表html的文字大小，就可以整體改變所有的頁面中的文字大小
偷懶的做法： (width 取值與頁面定義的寬度一致，目前是最佳實踐，缺點 android 2.3.5以下版本不支持，可以通過用戶代理判斷)
作業，找個響應式的頁面寫一下，ps：再不留連結地址了，萬一再被扣分禁言，就麻煩了！