css3背景和渐变

– 背景图片区域

-剪辑：-box;

-剪辑：-box;

-剪辑：-box;

例子：

-剪辑：-box;

-剪辑：-box;

-剪辑：-box;

-: CSS3背景图片定位

-:-盒子;

-:-盒子;

-:-盒子;

-size CSS3背景图片大小

: url(“bg1.jpg”) no-;

-大小：;

-大小：封面；

-尺寸：800px 500px;

-尺寸：800px；

-尺寸：50% 50%；

-尺寸：50%；

-尺寸：100% 100%；

-尺寸：100%；

CSS3 多背景图片

-图片：url(‘bg2.png’), url(‘bg1.jpg’);

-图片：url(‘bg1.jpg’), url(‘bg2.png’);

CSS3后台属性整合

: # 50% no-box -box fixed url(‘bg1.jpg’);

: # url(‘bg1.jpg’) no-;

-尺寸：50%；

-:-盒子;

-剪辑：-box;

-：固定；

CSS3 渐变

CSS3 线性渐变-

垂直渐变（默认）

：—（红色，蓝色）；

:-moz–(红、蓝);

:-o–(红、蓝);

:-(红、蓝);

水平渐变

：—（左、红、蓝）；

:-moz–(右、红、蓝);

：-o–（右，红，蓝）；

：-（向右，红色，蓝色）；

对角线

: —(左上角, 红色, , 蓝色);

:-moz–(右,红,,蓝);

:-o–(右,红,,蓝);

:-(向右, 红色, , 蓝色);

自定义角度

: —(, 红色, , 蓝色);

: -moz–(, red, , blue);

:-o–(, red, , blue);

:-(, 红色, , 蓝色);

渐变范围

: —(90°, 红色 10%, 15%, 20%, 绿色 50%, 蓝色 70%, 80%, 100%);

: -moz–(90deg, 红色 10%, 15%, 20%, 绿色 50%, 蓝色 70%, 80%, 100%);

:-o–(90度,红色10%,15%,20%,绿色50%,蓝色70%,80%,100%);

:-(90度，红色10%、15%、20%、绿色50%、蓝色70%、80%、100%)；

多个渐变–

：—-（90度，红色0%，蓝色10%，红色20%）；

: -moz—(90deg, 红色 0%, 蓝色 10%, 红色 20%);

:-o—(90度，红色0%，蓝色10%，红色20%);

:–(90度，红色0%，蓝色10%，红色20%);

径向渐变默认椭圆-

：—（红色，蓝色）；

:-moz–(红、蓝);

:-o–(红、蓝);

:-(红、蓝);

径向渐变圆重复渐变

: —(, 红色, 蓝色);

:-moz–(, red, blue);

:-o–(, red, blue);

:-(, 红色, 蓝色);

径向梯度-最近边-最远边-最近角-最远角

: —(-, red, blue);

:-moz–(-, red, blue);

: -o–(-, red, blue);

: -(-, 红色, 蓝色);

IE6~8渐变

: :..( =’#’, =’#’,=2 );