HTML-从零开始的学习过程（11）

CSS3背景和渐变

CSS3背景属性—background

• CSS3图像背景区域 – background-clip
  概念：指定背景绘制区域；
  语法：background-clip: border-box（背景被裁减到边框盒 - 默认值） ，padding-box（背景被裁减到内边距框） ，
  content-box（背景被裁减到内容框）；
  兼容性：ie9+ 、 firefox 、 chrome 、safari 、 opera；

• CSS3背景图像定位 – background-origin
  概念：设置元素背景图像的原始起始位置 – 指定background-position属性的相对位置；
  语法：background-origin : border-box（相对于边框位置开始的左上角的偏移量） ， padding-box（相对于内边框位置开始的左上角的偏移量- 默认值） ，content-box（相对于内容位置开始的左上角的偏移量）
  兼容性：ie9+ 、 firefox4+ 、 chrome 、 safari5+、 opera；
  说明：background-position:定义背景图片的位置：两个值 – 水平和垂直的偏移量；

• CSS3背景图像大小 – background-size
  概念：指定背景图像的大小；
  语法：background-size:
  默认值 - auto，
  length数值 – 第一个值设置宽度，第二个值设置为高度，如果只有一个值，第二个设置为auto（自动），
  百分比 – 第一个值设置宽度，第二个值设置为高度，如果只有一个值，第二个设置为auto（自动），
  cover – 保持图像的纵横比并将图像缩放成将完全覆盖背景背景定位区域的最小的大小，
  contain – 保持图像的纵横比并将图像缩放成将完全覆盖背景背景定位区域的最大的大小；
  兼容性：ie9+ 、 firefox4+ 、 chrome 、 safari5+、 opera；

• CSS3背景属性整合 – background
  语法：background：color position size repeat origin clip attachment image;

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

CSS3渐变效果

概念：CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
兼容性：ie10+ 、 chrome10+、 firefox4+ 、 safari6.1+ 、 opera12.1+；

• CSS3线性渐变 – linear Gradients（默认是从上往下）
  概念：沿着一根轴线改变颜色，从起点到终点进行顺序的渐变(从一边拉向另一边)；
  语法：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...

• CSS3线性渐变 – 使用角度
  语法：background：linear-gradient（angle(单位deg)，color1开始颜色，color2结束颜色，…多个渐变色）；

• CSS3线性渐变 – 重复渐变
  语法：background：repeating-linear-gradient（angle，color1开始颜色，color2结束颜色，…个渐变色）；

• CSS3径向渐变 – radial-gradient属性
  概念：从起点到终点颜色从内到外进行圆形渐变(从中间往外拉)；
  颜色节点不均匀分布
  background:radial-gradient(center（中心）,shape size（渐变尺寸大小）,star-color length|percentage,…end-color length|percentage)；
  设置形状
  background:radial-gradient(shape（形状）,star-color,…end-color)；
  形状说明：circle 圆形，ellipse 椭圆（默认），如果元素设置高宽值一样，那参数不论设置ellipse还是circle，显示都是圆形；
  尺寸大小关键字
  background:radial-gradient(size（渐变尺寸大小）,star-color,…end-color)；
  关键字说明：closest-side:最近边，closest-corner:最近角，farthest-side:最远边，farthest-corner:最远角；
  重复渐变
  repeating-radial-gradient(color1,color2…)；

• CSS3渐变针对ie浏览器的设置（ie6到ie8版本）
  说明：ie浏览器比较特殊，它的渐变实现效果需要通过过滤镜实现；
  语法：filter:progid:DXImageTransform.Microsoft.gradient(startColostr=”颜色”，endColorstr=”颜色”，GradientType=0) – GradientType这个值可以有0 1 2。。。。
  颜色值：必须填写16进制；
  兼容性：ie10+以上的版本才支持filter过滤器；

注：对于不同的浏览器，渐变效果的兼容都不相同，所以都需在前面加上浏览器的前缀名

如：

background:-webkit-linear-gradient(left,red, yellow);
background:  -moz-linear-gradient(right,red, yellow);
background:    -o-linear-gradient(right,red, yellow);
background:    linear-gradient(to right,red, yellow);