H5 C3中的概念（一）

阿里web字體的使用

（1）進入官網  點擊webfont

（2）輸入對應的文字 而後選擇添加字體

（3）能夠直接引用線上地址或者本地下載，引用線上地址須要添加http,（在服務器環境下能夠不用），若是是本地下載須要解壓，打開demo.html複製代碼便可

（4）注意修改路徑，而且給文字添加上對應的類

阿里Iconfont的使用 （重點，沒有兼容）

（1）進入官網 http://www.iconfont.cn/ 選擇圖標庫 ---- 全部圖標庫

（2）右上角搜索想要的圖標，而且添加到購物車裏面  

（3）選擇完畢以後點擊右上角的購物車圖標，點擊下載代碼

（4）解壓以後根據demo頁面上的提示選擇合適的一種方式去引用便可 （注意路徑的修改）

（4） 圓角

broder-radius：值 

值說明：

（1）一個值設置的是盒子的四個角的水平和垂直半徑

（2）每一個角均可以單獨進行設置 其取值順序是左上 右上 右下 左下順時針設置

（3）能夠簡寫  簡寫的邏輯跟padding和margin同樣

（4）單位支持像素，和百分比（參照的是寬度和高度）

（5）能夠用 水平半徑/垂直半徑 去單獨控制半徑 而且每個半徑均可以單獨控制

（5） 陰影

語法：box-shadow：值

值說明：

（1）第一個值 ：Npx  陰影向水平方向偏移N個像素  正數往右 負數往左

（2）第二個值 ：Npx  陰影向垂直方向偏移N個像素  正數往下 負數往上

（3）第三個值 ：羽化大小 （模糊的大小）

（4）第四個值 ：陰影尺寸

（5）第五個值 ：顏色 默認值是黑色

（6）第六個參數： 內外陰影 默認是外陰影 內陰影是inset

（7）陰影能夠寫多個，中間用逗號隔開

（8）陰影能夠簡寫，可是須要注意有一些值須要補0

文字陰影

語法： text-shadow：水平偏移 垂直偏移 羽化大小 顏色

巧妙運用能夠製做文字凹凸效果

（6）邊框圖片 (瞭解)

語法：border-image：值

聽從的是九宮格式切圖，上下左右分別來一刀

值說明：

（1）border-image-source:url('border.png'); 圖片路徑

（2）border-image-slice:26;圖片切割，不要帶單位，聽從九宮格式切圖法（上下左右各來一刀）

（3）border-image-repeat:round或者stretch或者repeat; round沒有瑕疵，stretch默認拉伸，repeat 平鋪（可能有瑕疵）

（4）簡寫：border-image:url('border.png') 26 round;

總結：是以九宮格式的方式切圖

（7） 背景系列

 （7.1）背景圖片的基準點

語法：background-origin：值

值說明：

（1）border-box  ：忽略邊框 直接從邊框的起始 0 ，0點平鋪

（2）padding-box： 默認值，忽略padding 直接從padding的起始 0 ，0點平鋪

（3）content-box ：從內容部分開始平鋪 跟padding有關係

      （7.2）多重背景

說明：背景圖片之間用逗號隔開，能夠寫多組，最早渲染的圖片有可能會遮住後面渲染的圖片

      （7.3）控制背景圖片的大小 （重要）

語法：background-size：值

 值說明：

（1）當只有一個值的狀況下，寬度實現拉伸，而且高度會保持等比例，能夠支持px，也能夠支持百分比，百分比參照的是這個盒子自己的寬度

（2）當有兩個值的狀況下，寬度和高度會分別拉伸到對應的值，可能會變形，能夠支持px，也能夠支持百分比，百分比參照的是這個盒子自己的寬度

（3）contain 當圖片的寬度或者是高度在縮放的時候有一個「碰到」了盒子的邊緣，則中止變化，（寬度或高度知足一個便可）

（4）在contain的基礎上保證不留白，這就是cover的效果（寬度和高度都須要知足）

（8）盒子內減 --- （重點）

若是你的公司只須要兼容IE9 及其以上可使用 移動端隨意

以前咱們的盒子的實際寬度是 實際寬度 = width + padding + border，而內減屬性會自動幫咱們 padding 和 border值 ，因此 用了內減的盒子實際寬度就等於width，至於padding和border的值會自動被width內減掉

在實際工做中，內減配合百分比佈局是實現移動端佈局的方式之一

（9）漸變

（9.1）線性漸變

background:-webkit-linear-gradient(起始位置,顏色一 位置,顏色二 位置 ,顏色三 位置);

（9.2）徑向漸變

background:-webkit-radial-gradient(起始位置,顏色一 位置,顏色二 位置 ,顏色三 位置);

總結：

（1）兩種漸變的參數都是同樣的 ，起始位置都接受方位名詞

（2）線性漸變的起始位置還能接受deg 角度 徑向漸變不能接受deg可是接受px

（3）須要添加私有前綴

（4）顏色位置的取值遵照遞增的關係

（9.3）私有前綴

 做用：兼容低版本的一些高級瀏覽器，或者一些特定的css3屬性須要添加私有前綴才起做用

每一條css3屬性合理來講都須要添加對應瀏覽器的前綴，以保證其兼容性

谷歌 蘋果：-webkit-

火狐：-moz-

IE：-ms-

o：-o-

小細節：在手機端，通常來講只須要寫一個-webkit-（針對國內的絕大部分手機端）

添加的位置：大部分都是直接添加到最前面，css2沒有的屬性都是添加在最前面的，有一些是css2就有的屬性是添加在後面的（background：-webkit-linear-gradient（））