css3背景和渐变

 

background-clip  CSS3 背景图像区域

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

例子：

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

 

background-origin: CSS3背景图像定位

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

 

background-size CSS3背景图片大小

background: url("bg1.jpg") no-repeat;
background-size: contain;
background-size: cover;
background-size: 800px 500px;
background-size: 800px;
background-size: 50% 50%;
background-size: 50%;
background-size: 100% 100%;
background-size: 100%;

 

CSS3多重背景图像

background-image: url('bg2.png'), url('bg1.jpg');
background-image: url('bg1.jpg'), url('bg2.png');

 

 

CSS3背景属性整合

background: #abcdef center 50% no-repeat content-box content-box fixed url('bg1.jpg');
background: #abcdef url('bg1.jpg') no-repeat center center;
background-size: 50%;
background-origin: content-box;
background-clip: content-box;
background-attachment: fixed;

 

CSS3渐变

 

CSS3 线性渐变  linear-gradient

垂直方向渐变（默认）

background: -webkit-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: linear-gradient(red, blue);

 水平方向渐变

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

对角

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

自定义角度

background: -webkit-linear-gradient(135deg, red, yellow, blue);
background: -moz-linear-gradient(135deg, red, yellow, blue);
background: -o-linear-gradient(135deg, red, yellow, blue);
background: linear-gradient(135deg, red, yellow, blue);

 

渐变范围

background: -webkit-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: -moz-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: -o-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);

多重渐变  repeating-linear-gradient

background: -webkit-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background: -moz-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background: -o-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background: repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);

 

径向渐变  默认椭圆  radial-gradient

background: -webkit-radial-gradient(red, blue);
background: -moz-radial-gradient(red, blue);
background: -o-radial-gradient(red, blue);
background: radial-gradient(red, blue);

径向渐变  圆形circle      重复渐变repeating

background: -webkit-radial-gradient(circle, red, blue);
background: -moz-radial-gradient(circle, red, blue);
background: -o-radial-gradient(circle, red, blue);
background: radial-gradient(circle, red, blue);

 

 径向渐变 closet-side最近边  farthest-side最远边   closest-corner最近角   farthest-corner最远角

background: -webkit-radial-gradient(closet-side circle, red, blue);
background: -moz-radial-gradient(closet-side circle, red, blue);
background: -o-radial-gradient(closet-side circle, red, blue);
background: radial-gradient(closet-side circle, red, blue);

 

IE6~8渐变

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=2 );