background属性及阴影知识点，CSS3部分新增属性！

CSS3知识点

background属性

1、background简写

　　// background: url(img/1.jpg) no-repeat left top; 

 

2、多背景

　　每组属性间逗号隔开；

　　为避免背景将图像盖住，背景色通常定义在最后一组上；

　　{

　　　　background: url(img/1.jpg) no-repeat left top,   

　　 　　url(img/2.jpg) no-repeat right bottom pink;

　　}

 

3、background-size 设置背景图片大小

　　cover: 会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏；

　　contain:会自动调整缩放比例，保证图片始终完整显示在背景区域,则背景区可能出现空白；

 

4、background-origin

　　border-box：背景图片的摆放以border区域为参考;

　　padding-box：背景图片的摆放以padding区域为参考;

　　content-box：背景图片的摆放以content区域为参考;

 

5、background-clip

　　将背景和背景色粗暴的裁剪,通常和background-origin一起使用;

　　　　border-box: 背景延伸至边框外沿,但是被边框压着;

　　　　padding-box: 背景延伸至内边距外沿;

　　　　content-box：背景被裁剪至内容区（content box）外沿。

 

阴影

　　1、文字阴影

　　　　text-shadow：水平位置 垂直位置 模糊距离 阴影颜色；

　　2、盒子阴影

　　　　box-shadow：水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内外阴影；

　　　　　　　　　　　　内外阴影：默认为外阴影，想改为内阴影，则添加inset；

　　　　　　{

　　　　　　　　box-shadow:2px 2px 3px 4px rgba( 0, 0, 0, 0.4),   

　　　　　　        　　　　　　 5px 5px 4px rgba( 0, 0, 0,0.4) inset;

　　　　　　}     

　　注：其中水平位置和垂直位置均为必选；多层阴影叠加依然用逗号隔开。