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