css学习2

渐变 gradients

线性渐变 linear gradients 向下/向上/向左/向右/对角方向

径向渐变 radial gradients 由中心向外

例 #grad { background-image: linear-gradient(#e66465, #9198e5); }默认上下方向

　#grad{

 height:200px;

background-image:linear-gradient(to right ,red,yellow);

}　　左到右

 

使用多个颜色结点 ，彩虹色。 {background-image:linear-gradient(to right,read,orange,yellow,green,blue,indigo,violet);)}

透明度，{background-image:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1);} 完全透明到不透明。

重复线性渐变{background-image:repeating-linear-gradient(red,yellow 10%,green 20&);}

 

径向渐变

{backgound-image:radial-gradient(red,yellow,green);}

渐变形状：{background-image:radial-gradient(cycle|ellipse,red,yellow,green);}默认ellipse ，随容器适应。

#grad1 { background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); }半径为最近的边

#grad2 { background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black); }半径为最远的边

#grad3 { background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black); }半径为最近的角

#grad4 { background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black); }半径为最远的角