? ? ? ? ? 关键词： Linear Gradients ，? Radial Gradients ?? ? ? ? ? ? ? ? ? ??

????????????????????????????????????????????CSS3动画

大白眨眼

1. 移动端少用px rem 细致的每个盒子或盒子模型的大小等比例定义。

在手机端不要使用px 会不准确

em是相对于自身的字体大小来比例的

10em 10*14px = 140px

rem html 根元素的fontsize

2.?html 默认的字体大小是16px

如果没有设置 ，会使用父级，或者body font-size

3.?gradients（渐变）

CSS3 定义了两种类型的渐变（gradients）：

a. 线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向

b. 径向渐变（Radial Gradients）： 由它们的中心定义

linear Gradients （线性渐变）:

? ? a.向同一个方向进行颜色渐变，上下左右对角线。

? ? b. 语法：background: linear-gradient(to direction(方向), color-start, color-stop1, ... , color-end);

? ? c. 第一个参数 to direction ,可以设置方向，如果不设置，默认自上到下。

? ??????to bottom(自上到下)? ? to right(自左向右)? to left(自右向左)? to top(自下向上)

? ??????to top left(右下到左上)??to top right(左下到右上)??to bottom left(右上到左下)?to bottom right(右上到左下)

? ? ? ? 0deg(从下到上)? 90deg(从左到右)? 180deg(从上到下)? 270deg(从右到左)? 360deg(从下到上)? -90deg(从右到左)

? ? d. 第二个参数color-start, color-stop1，color-stop2,....... ，颜色开始到颜色结束。

? ??????????在颜色后面加百分比，就可以控制在整个宽度的百分之多少的时候到达某一个颜色值。

? ? ? ? ? ? 例子：background:?linear-gradient(#3a1c71,?#d76d77,#ffaf7b);?

? ? ? ? ? ? ? ? ? ? ? ?background:?linear-gradient(#3a1c71,?#d76d77?20%?,#ffaf7b?70%); //在#d76d77达到宽度20%的时候停止渐变。

? ? ? ? ? ? ? ? ? ? ? ?background:?linear-gradient(#3a1c71,?#d76d77?80%?,#ffaf7b?90%)；//在#d76d77达到宽度80%的时候停止渐变。

渐变加百分比

线性渐变总写法：background:?linear-gradient(to?bottom,#3a1c71,?#d76d77?80%?,#ffaf7b?90%);

radial-gradient（径向渐变）：

a.由一个中心点向外围渐变。

b. 语法：background: radial-gradient(size shape at position,start-color, ..., last-color);

? ? size：半径，可不写；如果不写，默认为从中间开始，圆形。

? ?????????????如果写，单位为px。

? ?????????????如果传两个值，形状即为椭圆，第一个值为横向长度，第二个值为纵向长度。

? ? ? ? ? ? ? ? 如果传?closest-side??farthest-side??closest-corner??farthest-corner? ，表示不同的渐变大小尺寸。

? ? shape:? 形状，circle,ellipse 圆和椭圆，可忽略。

? ?at position： 渐变的位置。?

? ??????????????????????at + center/top/bottom/left/right?: 表示渐变在中心，在上，在下，在左，在右。

? ? ? ? ? ? ? ? ? ? ? ? at + (x,y)? ? 左上角为 0px 0px? ?

? ? ? ? ? ? ? ? ? ? ? ? at + 百分比?

? ? start-color ,...last-color:? 与线性渐变相同。

em

a.?浏览器的默认字体大小是16px

b.?如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height” ,

? ??????????????????1 ÷ 父元素的font-size × 需要转换的像素值 = em值

c.?如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：

? ??????????????????1 ÷ 父元素的font-size × 需要转换的像素值 = em值

d.? 那么元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：

? ??????????????????1 ÷ 元素自身的font-size × 需要转换的像素值 = em值

备注：此文章根据实例总结而来，访问更多请点我的github