01-移动端开发教程-CSS3新特性（上）
1. 移動端開發課程概述
移動互聯網的興起，讓移動端的開發迅速躥紅。對于前端開發者來說，移動端的開發已經占據了他們大部分工作時間。接下來老馬帶大家一起學習移動端開發的相關前端開發技術。
這邊課程內容包括：
- CSS3新特性
- 新選擇器
- 邊框、背景升級、圓角、陰影
- 新的盒模型
- 漸變、動畫、2D3D轉換
- 伸縮布局、多列布局
- 新單位
- 在線字體圖標
- 前綴應用、瀏覽器兼容、漸進增強
- 媒體查詢
- 移動端適配開發方案
- 響應式布局開發方案
- 移動端js、觸屏事件
- zepto.js\bootstrap\iScroll.js\fastclick.js等移動端庫
- 移動端開發調試
- 移動端完整項目
2. 關于CSS3的學習
2.1 CSS3學習手冊
學習CSS3最好的工具就是文檔。有文檔在手，按照文檔多練習一些案例，就能掌握。CSS算是比較容易學習的前端技術了。
在線文檔地址：http://www.phpstudy.net/css3/
離線文檔下載地址：地址戳
2.2 CSS文檔的閱讀規則
| [] | 表示全部可選項 |
| || | 表示或者 |
| | | 表示多選一 |
| * | 代表出現0次或以上。 |
| + | 代表出現1次或以上。 |
| ? | 代表是可選的，即出現0次或1次。 |
| {A} | 代表出現A次。 |
| {A,B} | 代表出現 A 次以上 B 次以下，其中B可以省略為 {A,}，代表至少出現A次，無上限。 |
| # | 代表出現1次以上，以逗號隔開，可以選擇后面跟大括號的形式，精確表示重復多少次，如<length>#{1,4}。 |
| ! | 代表出現產生一個值，即使組內的值都可以省略，但至少有一個值不能唄省略，如[ A? B? C? ]!。 |
2.3 關于瀏覽器兼容的前綴
由于歷史原因，瀏覽器在實現最新的CSS3的標準的時候都存在過渡和實驗階段。當然標準也不文檔，瀏覽器廠商在不穩定或者性能不高的實驗階段，各大瀏覽器都把新增的標準屬性的實現添加各自的前綴。比如：-webkit-、-moz- -ms-。
學習階段不需要去做這些重復工作，只需要用第三方的工具自動化處理就行。后面都會學習：
比如：開發工具前綴插件、gulp自動化處理、webpack自動化處理。CSS預處理和后處理的語言都可以實現編譯時處理。
3. CSS3新增的選擇器
3.1 屬性選擇器
其特點是通過屬性來選擇元素，具體有以下5種形式：
| E[attr] | 表示存在attr屬性即可 |
| E[attr=val] | 表示屬性值完全等于val； |
| E[attr*=val] | 表示的屬性值里包含val字符并且在“任意”位置； |
| E[attr^=val] | 表示的屬性值里包含val字符并且在“開始”位置； |
| E[attr$=val] | 表示的屬性值里包含val字符并且在“結束”位置； |
3.2 偽類選擇器
除了以前學過的:link、:active、:visited、:hover，CSS3又新增了其它的偽類選擇器。
3.2.1 以某元素相對于其父元素或兄弟元素的位置來獲取無素的結構偽類
重點理解通過E來確定元素的父元素。
| E:first-child | 第一個子元素 |
| E:last-child | 最后一個子元素 |
| E:nth-child(n) | 第n個子元素，計算方法是E元素的全部兄弟元素； |
| E:nth-last-child(n) | 同E:nth-child(n) 相似，只是倒著計算；n遵循線性變化，其取值1、2、3、4、... 但是當n<=0時，選取無效。 |
| E:empty | 選中沒有任何子節點的E元素；（使用不是非常廣泛） |
n可是多種形式：nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等；需要滿足y=ax+b 注：指E元素的父元素，并對應位置的子元素必須是E
3.2.2 目標偽類
E:target 結合錨點進行使用，處于當前錨點的元素會被選中；
3.2.3 偽元素選擇器
| E::first-letter | 文本的第一個單詞或字（如中文、日文、韓文等）； |
| E::first-line | 文本第一行； |
| E::selection | 可改變選中文本的樣式； |
| E::before、E::after | 是一個行內元素，需要轉換成塊元素。E:after、E:before在舊版本里是偽元素，CSS3的規范里“:”用來表示偽類，“::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做兼容處理。E:after、E:before后面的練習中會反復用到，目前只需要有個大致了解 |
注意：":" 與 "::" 區別在于區分偽類和偽元素。參考文檔:before和::before的區別
4. CSS3中新增加的顏色表示方法
顏色表示方法有：顏色名、十六進制表示法、rgb表示法、transparent。
color: red; background-color: #e0f; color: rgb(33,88,0); border-top-color: transparent;4.1 新增了RGBA模式
Red、Green、Blue、Alpha即RGBA。
R、G、B 取值范圍0~255
其中的A 表示透明度通道，即可以設置顏色值的透明度。0完全透明，1完全不透明。
color: rgba(23,23,23,.7);4.2 新增了HSLA模式
Hue、Saturation、Lightness、Alpha即HSLA
| H | Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360 |
| S | Saturation(飽和度)。取值為：0.0% - 100.0% |
| L | Lightness(亮度)。取值為：0.0% - 100.0% |
| A | Alpha透明度。取值0~1之間。 |
關于H的取值可以參考：
色調圖譜色調圖
4.3 關于透明度
- opacity只能針對整個盒子設置透明度，子盒子及內容會繼承父盒子的透明度；
- transparent 不可調節透明度，始終完全透明。RGBA、HSLA可應用于所有使用顏色的地方。
5. 文本增強
5.1 text-shadow文本陰影
- 語法：
text-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?
- 說明：
設置或檢索對象中文本的文字是否有陰影及模糊效果。
可以設定多組效果，每組參數值以逗號分隔。
-
取值：
- none:無陰影
- <length>①：第1個長度值用來設置對象的陰影水平偏移值。可以為負值
- <length>②：第2個長度值用來設置對象的陰影垂直偏移值。可以為負值
- <length>③：如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值
- <color>：設置對象的陰影的顏色。請參閱顏色值
默認值：none
各種效果參考：戳這里
5.2 text-overflow
語法：text-overflow：clip | ellipsis
說明：
設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出。
- 取值：
- clip：當對象內文本溢出時不顯示省略標記（...），而是將溢出的部分裁切掉。
- ellipsis： 當對象內文本溢出時顯示省略標記（...）。
- 默認值：clip
6. 增強邊框
6.1 邊框圓角border-radius
- 語法：
border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
-
取值：
- <length>：用長度值設置對象的圓角半徑長度。不允許負值
- <percentage>：用百分比設置對象的圓角半徑長度。不允許負值
默認值：0
-
說明：
- 設置或檢索對象使用圓角邊框。提供2個參數，2個參數以“/”分隔，每個參數允許設置1~4個參數值，第1個參數表示水平半徑，第2個參數表示垂直半徑，如第2個參數省略，則默認等于第1個參數。
- 水平半徑：如果提供全部四個參數值，將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序作用于四個角。
- 如果只提供一個，將用于全部的于四個角。
- 如果提供兩個，第一個用于上左(top-left)、下右(bottom-right)，第二個用于上右(top-right)、下左(bottom-left)。
- 如果提供三個，第一個用于上左(top-left)，第二個用于上右(top-right)、下左(bottom-left)，第三個用于下右(bottom-right)。
- 垂直半徑也遵循以上4點。
- 對應的腳本特性為borderRadius。
ulx: up left x radius 上面左側的水平（x）方向的半徑。
uly：up left y radius 上面左側的垂直（y）方向的半徑
lrx: low right x radius
llx: low left x radius
... 依次類崔
以上4個角的邊框都可以分別用border-top-left-radius, border-top-right-radius, border-bottom-right-radius ，border-bottom-left-radius替代。
案例：
.box {border-radius: 100px 25px 50px 50px / 50px 25px;/* 等價于 */border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;/* 等價于 */border-top-left-radius:100px 50px; /*ulx uly*/border-top-right-radius:25px 25px; /*urx ury*/border-bottom-right-radius: 50px 50px; /*lrx lry*/border-bottom-left-radius: 50px 25px; /*llx lly*/ }結果：
6.2 邊框陰影 box-shadow
- 語法：
box-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = inset? && [ <length>{2,4} && <color>? ]
-
取值：
- none：無陰影
- <length>①：第1個長度值用來設置對象的陰影水平偏移值。可以為負值
- <length>②：第2個長度值用來設置對象的陰影垂直偏移值。可以為負值
- <length>③：如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值
- <length>④：如果提供了第4個長度值則用來設置對象的陰影外延值。不允許負值
- <color> :設置對象的陰影的顏色。請參閱顏色值
- inset：設置對象的陰影類型為內陰影。該值為空時，則對象的陰影類型為外陰影
默認值：none
說明：
設置或檢索對象陰影。可以設定多組效果，每組參數值以逗號分隔。設置邊框陰影不會改變盒子的大小，即不會影響其兄弟元素的布局。
可以設置多重邊框陰影，實現更好的效果，增強立體感。
6.3 邊框圖片border-image
邊框的背景圖非常類似盒子的背景圖的應用。border-image是邊框背景圖多個屬性的合寫，可以一個屬性里面設置多個值。
6.3.1 邊框背景圖border-image-source
設置邊框的背景圖片,默認為none，可以是url(..)
border-image-source: url(image.jpg); border-image-source: none; /* 線性漸變當做圖片，后面講線性漸變 */ border-image-source: linear-gradient(to top, red, yellow);6.3.2 邊框背景圖平鋪方式border-image-repeat
border-image-repeat是設置邊框背景圖片平鋪的方式。或為單個值，設置所有的邊框；或為兩個值，分別設置水平與垂直的邊框。
語法:[ stretch | repeat | round | space ]{1,2}
| stretch | 拉伸圖片以填充邊框,也是默認值。 |
| repeat | 平鋪圖片以填充邊框。 |
| round | 平鋪圖像。當不能整數次平鋪時，根據情況放大或縮小圖像。 |
| space | 平鋪圖像 。當不能整數次平鋪時，會用空白間隙填充在圖像周圍（不會放大或縮小圖像） |
實例：
border-image-repeat: repeat; /* 設置水平：spac 垂直為：round */ border-image-repeat: space round;6.3.3 設置背景圖裁切border-image-slice
border-image-slice屬性會將border-image-source的圖片明確的分割為9個區域：四個角，四邊以及中心區域。這個將會通過指定的四個內向距離來實現(分別為下圖中的top、right、bottom、left)。
語法格式：
border-image-slice: 27; /*top=right=bottom=left=27px 不帶單位*/ border-image-slice: 27 14; /*t=b=27px l=r=14px*/ border-image-slice: 27 14 20;/*t=27px r=l=14px b=20*/ border-image-slice: 27 14 20 22;/*t=27px r=14 b=20 l=22*/圖片將會被“切割”成九宮格形式，然后進行設置。如下圖
圖片將會被“切割”成九宮格形式，然后進行設置。如下圖
代碼：
<style>.box {width: 380px;height: 380px;/* 必須設置border的屬性，不然邊框背景圖的設置就沒有效果 */border: 30px solid #cf0;/*border-image: url(./img/border.png) 27 space;*/border-image-source: url(./img/border.png);border-image-repeat: round;border-image-slice: 27;/*四個方向都是27像素的切割*/} </style> <div class="box">12344 </div> 最終結果6.3.4 邊框圖片樣式合寫border-image
語法：border-image: source slice outset repeat;
例如：
border-image: url("/images/border.png") 30 30 repeat; border-image: url("/images/border.png") 30 20 19 repeat round; border-image: url("/images/border.png") 30 10 20 18 space stretch; border-image: url("/images/border.png") 30 repeat;6.4 border-image-outset屬性定義邊框圖像可超出邊框盒的大小。
border-image-outset屬性定義邊框圖像可超出邊框盒的大小。不能為負數，可以分別設置1個值：四個邊。兩個值：對應上下，左右。三個值：上 、左右、下。四個值：上、右、下、左邊框。
/* border-image-outset: sides */ border-image-outset: 30%;/* border-image-outset:垂直 水平 */ border-image-outset: 10% 30%;/* border-image-outset: 頂 水平 底 */ border-image-outset: 30px 30% 45px;/* border-image-outset:頂 右 底 左 */ border-image-outset: 7px 12px 14px 5px;border-image-repeat: inherit;7. 新的盒模型
CSS3中可以通過box-sizing來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。
-
content-box
默認值，標準盒子模型。 width 與 height 只包括內容的寬和高， 不包括邊框（border），內邊距（padding），外邊距（margin）。注意: 內邊距, 邊框 & 外邊距 都在這個盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在瀏覽器中的渲染的實際寬度將是370px;
尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。
-
border-box
width 和 height 屬性包括內容，內邊距和邊框，但不包括外邊距。
這是當文檔處于 Quirks模式 時Internet Explorer使用的盒模型。注意，填充和邊框將在盒子內 , 例如, .box {width: 350px; border: 10px solid black;} 導致在瀏覽器中呈現的寬度為350px的盒子。內容框不能為負，并且被分配到0，使得不可能使用border-box使元素消失。
可以分成兩種情況：
1、box-sizing: border-box;=> width = contentWidth + border + padding
2、box-sizing: content-box; => width = contentWidth
兼容性比較好
請關注下一節：
- 漸變
- 過渡
- 2D3D轉換
- CSS3動畫
- 伸縮布局
- 多列布局
- web字體
對應視頻地址：https://chuanke.baidu.com/s5508922.html
老馬qq： 515154084
老馬微信：請掃碼
總結
以上是生活随笔為你收集整理的01-移动端开发教程-CSS3新特性（上）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CENTOS7配置静态IP后无法ping
- 下一篇： CSS3动画详解（图文教程）