2019獨角獸企業重金招聘Python工程師標準>>>

阿里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（））

轉載于:https://my.oschina.net/u/2996786/blog/782343

總結

以上是生活随笔為你收集整理的H5 C3中的概念（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。