css的渐变与过渡

css3浏览器前缀

1.-ms-     -ms-box-shadow  IE浏览器专属的CSS属性需添加-ms-前缀

2.-moz-     -moz-box-shadow  所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀

3.-o-     -o-box-shadow  Opera浏览器专属的CSS属性需添加-o-前缀

4.-webkit-   -webkit-box-shadow  所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀

 

 

 背景颜色渐变：

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

语法：

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

2.linear-gradient（to 方向（1到两个），2~多个颜色，颜色中间用逗号分隔）

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

示例：

 

效果：

加浏览器内核：

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

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

Background-image

 示例：

效果：

 

径向渐变：

向四周扩散的渐变，默认为椭圆状

语法：background/background-image：radial-gradient（2至多个颜色）

在颜色后面添加百分比【从小到大】

形状，颜色

-webkit-radius-gradient（方位，颜色）

方位，形状，颜色

 示例：

效果：

 

 

 重复渐变：

重复的线性渐变 repeating-linear-gradient() 【颜色必须跟百分比，否则无法形成重复的效果】

重复的径向渐变 repeating-linear-gradient()【颜色必须跟百分比，否则无法形成重复的效果】

示例:

效果：

 

 

背景设置： 

css中背景相关的属性：

属性	含义	用法说明
background-clip	指定背景的显示范围	① background-clip: border-box ;  默认值 ② background-clip: padding-box；背景被剪到内边距框 ③ background-clip:content -box；背景被裁剪到内容框 ④ - webkit -background-clip: text ；
background-origin	绘制背景图像时的起点	① background-origin: padding-box  默认值； ② background-origin:border-box  背景图像相对于边框盒来定位 ③ background-origin:content -box  背景图像相对于内容框来定位
background-size	背景图的大小	① background-size ： 200px  100px;  或者  background-size :200%  100%; ② background-size :cover ; 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。             background-size:contain;  保持背景图像本  身的宽高比例不变进行缩放

过渡效果：

css中transition过度属性：

属性	说明
transition-property	需要过渡的样式，默认是all
transition-duration	运动时间 默认是 0 s
transition-delay	延迟时间  默认是0 s
transition-timing-function	运动形式 默认是0 s 1.ease（慢速开始，然后变快，然后慢速结束） 2.linear（匀速）  ease-in（加速） 3.ease-out（减速） 4.ease-in-out（先加速后减速） 5.A.cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）http:cubic-bezier.com 6.steps（）实现一个关键逐帧动画功能

示例：

 

效果：

鼠标点击时下面的先运行结束然后再运行上面的