CSS3背景和渐变 学习打卡

课程目标

1. 背景图像区域
2. 背景图像定位
3. 背景图像大小
4. 背景属性整合
5. 渐变
6. 线性渐变
7. 径向渐变

CSS3背景图像

background-clip

1、指定背景绘制区域
2、background-clip: border-box（背景被裁减到边框盒 - 默认值） padding-box（背景被裁减到内边距框） content-box（背景被裁减到内容框）
3、兼容：IE9+ firefox chrome safari opera

background-origin

1、设置元素背景图像的原始起始位置 – 指定background-position属性的相对位置
2、background-position:定义背景图片的位置：两个值 – 水平和垂直的偏移量
3、兼容：IE9+ firefox4+ chrome safari5+ opera
4、语法：background-origin :

• border-box（相对于边框位置开始的左上角的偏移量）
• padding-box（相对于内边框位置开始的左上角的偏移量- 默认值）
• content-box（相对于内容位置开始的左上角的偏移量）

background-size

1、指定背景图像的大小
2、兼容：IE9+ firefox4+ chrome safari5+ opera
3、语法：background-size: 默认值 - auto

• length数值 – 第一个值设置宽度，第二个值设置为高度，如果只有一个值，第二个设置为auto（自动）
• 百分比 – 第一个值设置宽度，第二个值设置为高度，如果只有一个值，第二个设置为auto（自动）
• cover – 保持图像的纵横比并将图像缩放成将完全覆盖背景背景定位区域的最小 大小
• contain – 保持图像的纵横比并将图像缩放成将完全覆盖背景背景定位区域的最大 大小

background

1、背景缩写属性可以在一个声明中设置所有的背景属性
2、语法：background：color position size repeat origin clip attachment image;
3、不推荐如下写法：

background: #abcdef center 50% no-repeat content-box content-box fixed url("4.jpg");

4、推荐如下：

background: #abcdef url("1.gif") no-repeat center center;
background-size: 50%;
background-origin: content-box;
background-clip: content-box;
background-attachment: fixed;

渐变效果

CSS3渐变

1、可以在两个或者多个颜色之间显示平稳的过渡 – 过渡：颜色的逐渐变化
2、兼容：ie10+ chrome10+ firefox4+ safari6.1+ opera12.1+

CSS3线性渐变

linear Gradient

1、沿着一根轴线改变颜色，从起点到终点进行顺序的渐变(从一边拉向另一边) 默认是从上往下
2、语法：background：linear-gradient（direction方向，color1开始颜色，color2结束颜色，。。。。多个渐变色）

对于左右而言

1、chrome – begin-direction，color1,color2…
2、Firefox – end-direction，color1,color2…
3、Opera – end-direction，color1,color2…
4、标准 – to end-direction，color1,color2…

对角线

1、chrome begin-level begin-vertical，color1,color2…
2、Firefox end-level end-vertical，color1,color2…
3、Opera end-level end-vertical，color1,color2…
4、标准形式 to end-level end-vertical，color1,color2…

使用角度

1、语法：background：linear-gradient（angle，color1开始颜色，color2结束颜色… 多个渐变色）
2、角度说明： 单位：deg

重复渐变

1、概念：类似于2个颜色不断的重复出现，呈现出类似斑马线的效果；
2、语法:background:reapeating-linear-Gradient(color-start开始颜色，color-end结束颜色。。。)
案例演示

CSS3径向渐变

radial gradient

1、从起点到终点颜色从内到外进行圆形渐变的过程（从中间向外拉）
2、语法：background:radial-gradient(center,shape size,star-color,…last-color);

颜色结点不均匀分布

语法：background:radial-gradient(star-color lenth/%,…last-color lenth/%);

设置形状

1、语法：background:radial-gradient(shape，star-color lenth/%,…last-color lenth/%);
2、Shape：只有2个值：
(1) Circle – 圆形
(2) Ellipse – 椭圆形(默认)
(3) 注意点：如果元素我们设置宽高值一样，那么参数不论设置为ellipse还是circle，显示效果都是圆形；

尺寸大小关键字

1、语法：background:radial-gradient(size，star-color lenth/%,…last-color lenth/%);
2、size值：
(1) Closest-side最近边
(2) Farthest-side最远边
(3) Closest-corner最近角
(4) Farthest-corner最远角

重复渐变

background:reapeating-radial-Gradient(color-start开始颜色 length/%，color-end结束颜色…)

IE渐变

针对IE6到IE8版本设置
1、说明：IE浏览器比较特殊，他的渐变实现效果需要通过过滤镜实现；
2、语法：filter:progid:DXImageTransform.Microsoft.gradient(startColostr=”颜色”，endColorstr=”颜色”，GradientType=0) – GradientType这个值可以有0 1 2。。。。
3、颜色值：必须填写16进制；

思维导图