css3
1==》颜色的6种表示的方法
有6种表示颜色的方法 关键字 rgb rgba(css3) 16进制 hsl hsla
hsla h=>是色相，值为360， s=>饱和度，0%--100%； l-->亮度（0%--100%)； a-->透明度（0 表示完全透明，1表示完全不透明）
2==》透明度 opacity
一个元素的 opacity属性会完全的应用在这个元素的本身和它的子孙上， opacity的值在0--1；0表示完全的透明（看不见）
兼容所有的浏览
img{ filter:Alpha(opacity=45); //它的值在0-1 opactiy:0.45; //兼容IE8以下； }
3==》线性渐变
background: linear-gradient(to bottom,red,green); /*从顶部到底部 to是到 效果顶部红 底部绿 你还可以多些几个颜色*/ background: linear-gradient(180deg,red,green); /* 顺时针 上部是红 下面试绿 */ background: linear-gradient(180deg,red,green,pink); /* 顺时针 上部是红 中间绿 底部是粉红 */
4===》径向渐变
径向渐变：是从图形的中心（center默认值）向四周放射性渐变， 默认是椭圆形渐变
径向渐变的语法
radial-gradient（形状 大小 at位置;颜色1，颜色2，颜色3,颜色4);
形状：circle是圆形的方式渐变 ellipse是（默认值），是以椭圆的方式进行渐变的
大小：第一种40px;直径是40px的大小； 第二种:20% 30%;横轴渐变的直径是宽度的20%，纵轴渐变是高度的30%；
at位置：一共有9个位置,left,right,top,bottom, left top,.......,center(默认值);
background: radial-gradient(circle 50px,aqua,#333333); /*circle是圆形的方式渐变 50px是渐变的大小，aqua是渐变的颜色，背景颜色是灰色#333333 */ background:radial-gradient(at left top,red,blue); /*左边是红色，右边是绿色*/
5定义多张背景图==》
#box { width: 400px; height: 500px; border: 1px solid red; /* background-image: url(./img/b.jpg), url(./img/index7_07.jpg); background-position:top left,center right; background-repeat:no-repeat,no-repeat; */ /* 上面的代码时可以简写的 */ background:url("./img/b.jpg") top left no-repeat, url("./img/index7_07.jpg") center right no-repeat; }
