css3新特性--渐变(大全).docx

一、线性渐变(Linear Gradients)起始位置为头部：.linear_gradient_square{width:100px;height:100px;border:1pxsolid#333;background:-moz-linear-gradient(top,blue,white);}起始位置为左：background:?-moz-linear-gradient(left,blue,white);起始位置为左上：background:?-moz-linear-gradient(lefttop,blue,white);起始位置为左，图二加上20度的角度：background:?-moz-linear-gradient(left?20deg,black,white);*当指定的角度，请记住，它是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。主要部分代码如下：background:?-moz-linear-gradient(,red,white);颜色位置定义：background:-moz-linear-gradient(top,blue,white80%,orange);如若没有定义颜色位置，颜色会均匀分布：background:?-moz-linear-gradient(left,red,?orange,yellow,green,blue);一个白色到透明的线性渐变：.multibackground_transparent{background:?-moz-linear-gradient(right,?rgba(255,255,255,0),?rgba(255,255,255,1)),url(/openweb/resources/images/patterns/flowers-pattern.jpg);}二、径向渐变(Radial Gradients)标准径向渐变：background:-moz-radial-gradient(red,yellow,#1E90FF);background:-moz-radial-gradient(red5%,yellow25%,#1E90FF50%);径向渐变形状，circle（圆）、ellipse（椭圆）：.radial_gradient_circle{background:?-moz-radial-gradient(bottomleft,circle,red,yellow,#1E90FF);}.radial_gradient_ellipse{background:?-moz-radial-gradient(bottomleft,?ellipse,red,yellow,#1E90FF);}closest（标准近边）、farthest（远边）：background:?-moz-radial-gradient(ellipse closest-side,red,yellow10%,#1E90FF50%,white);background:?-moz-radial-gradient(ellipse farthest-corner,red,yellow10%,#1E90FF50%,white);同上：background:?-moz-radial-gradient(circle?closest-side,red,yellow10%,#1E90FF50%,white);background:?-moz-radial-gradient(circle?farthest-side,red,yellow10%,#1E90FF50%,white);contain（包含圆），默认为不包含：background:?-moz-radial-gradient(red,yellow,#1E90FF);background:?-moz-radial-gradient(contain,red,yellow,#1E90FF);三、重复渐变(Repeating Gradients)定义了四个起止颜色，并无限重复：.repeating_radial_gradient_example{background:-moz-repeating-radial-gradient(black,black5px,white5px,white10px);}.repeating_linear_gradient_example{background:-moz-repeating-linear-gradient(topleft-45deg,red,red5px,white5px,white10px);}--------------转自blo