CSS3渐变与背景学习笔记

1.线性渐变linear-gradient

• 功能：显示两个或多个指定颜色间的平滑过渡。
• 两种类型的渐变：线性（Linear）-向下/向上/向左/向右/对角方向。
  径向（Radial）-由它们的中心定义。
• 多个颜色可用“，”逗号隔开，浏览器将从上到下显示并生成渐变效果。
• 在颜色值前加入top/right/bottom/left可改变渐变的初始方向，也可以两个值结合，如right bottom（右下角开始渐变）。
• 数字+deg也可以设置渐变开始的角度，0deg表示从left位置开始渐变，90deg是bottom位置，180deg是right位置，270deg是top位置，360deg还是left位置，以此类推。
• repeat-linear-gradient()函数用于重复线性渐变，格式为background:repeat-linear-gradient(color size);

2.径向渐变radial-gradient

• 功能：从圆或椭圆中心开始的从内到外进行的圆形渐变。
• 基本语法：background：radial-gradient(shape size at position,start-color,…,last-color);
  
• 定位圆心时可将位置参数结合使用。
• 可用长度或百分比设定颜色停止位置。如(circle, green 40%, red 50%, yellow 80%);

3.background-size属性

• 功能：使用长度或百分比来指定背景图像的大小。
• 基本语法：background-size：length | percentage | cover | contain;
• length：设置背景图像的宽度和高度，第一个值是宽度，第二个值高度，如果只设置第一个值，那么第二个值会自动转换为"auto"。
• percentage：以父元素的百分比来设置图片的高度和宽度，第一个值是宽度，第二个值高度，如果只设置第一个值，那么第二个值会自动转换为"auto"。
• cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，因此可能只显示部分图片。
• contain：把图像扩展至最大尺寸，以使宽度和高度完全适应内容区域。

4.background-clip属性

• 属性：指定背景的绘画区域。
• 三值：border-box -（默认）背景被绘制到边框的外边缘。
  padding-box - 背景被绘制到填充的外边缘。
  content-box - 背景被绘制在内容框中。
• 同样适用于背景图像。

5.background-clip的透明边框

• 方法：使用RGBA参数，A取值为0~1，通常background-clip属性设置为padding-box，边框才会透明。

6.层叠的背景图

• 实现：通过“，”逗号分隔设置，第一个图像出现在顶部，最后一个在底部。
• 使用background-position属性可以更改背景图像的设置。
• 可以使用background简写属性，如：background：url(w3cschool.png) right top no-repeat, url(w3cschool.jpg) left top no-repeat;

7.opacity属性

• 功能：为元素增加一个不透明度，取值为0.0-1.0，值越小，图片越透明。
• IE浏览器中设置opacity：filter：alpha(opacity = x) ;

课程资源来自w3cschool
推荐一个在线查询代码差异的工具：https://tool.oschina.net/diff/