文本阴影+盒子阴影+线性渐变+过度效果小记

文本阴影

text-shadow

定义/作用：设置文本阴影的效果

语法：text-shadow：x方向的位置 y方向的位置【向下】模糊距离 颜色【默认跟文本的颜色一致】

有两个必须的属性：x方向的位置 y方向的位置

盒子阴影

box-shadow

定义/作用：设置盒子的阴影效果 阴影颜色受文本颜色影响

语法：box-shadow:x轴 y轴 模糊距离 模糊大小 颜色 外/内阴影

线性渐变：

线性渐变：方向 默认从上到下

语法：

background：linear-gradient（2~多个颜色，颜色中间用逗号分隔）；

linear-gradient（to 方向【1-2个】，2~多个颜色，颜色中间用逗号分隔）；

linear-gradient（度数deg，2~多个颜色，颜色中间用逗号分隔）；

加浏览器内核：

方向：方向没有to 直接跟的left/right/。。。【两个方向的时候，浏览器加内核的识别标准跟统一标准不一样】

度数：从右边开始逆时针的方向进行

径向渐变：方向 从中心往四周渐变 ，默认为椭圆

background：radial-gradient（2~多个颜色，颜色中间用逗号分隔）

radial-gradient（在颜色后面加百分比，要从小到大，2~多个颜色，颜色中间用逗号分隔）；形状，颜色

-webkit- radial-gradient（方位，2~多个颜色，颜色中间用逗号分隔）；方位，形状，颜色

重复渐变：repeating【厌恶必须跟百分比，否则无法形成重复渐变的效果】

默认是椭圆的，可以在括号里加一个circle

过度效果

transition-property 需要过渡的样式 ，默认是 all

transition-duration 运动时间 默认是 0 s    

transition-delay 延迟时间 默认是 0 s 

transition-timing-function 运动形式   默认是 ease

                                                 A.ease：（慢速开始，然后变快，然后慢速结束） 

                                                 B. linear：（匀速）  ease-in：(加速)

                                                 C.ease-out：（减速）

                                                 D.ease-in-out：（先加速后减速）

                                                 E.cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）http:cubic-bezier.com

                                                 F.steps（） 实现一个关键逐帧动画的功能

transition： all （所有的）2s（运动的时间）2s（延时的时间）ease（运动的效果）；