css学习（二）：背景、圆角、阴影

一、background背景

1、css2中主要的背景属性：

• background-color：背景颜色；
• background-img：背景图片；
• background-repeat：背景（如果）重复；默认值是repeat；
• background-attachment：背景图片是否固定或者随着页面的其余部分滚动；默认值是scroll；
• background-position：背景定位；默认是0 0（ left top ）；

2、css3中新增的背景属性：

• background-size：背景大小；auto auto
• background-origin：背景开始绘制（定位）的区域；padding-box（内边距）左上角
• backgroun-clip：背景显示的区域（可以显示到哪个区域）；border-box（边框）左上角；

3、注意事项：

1. 如果写成简写：background：#455678 url（ ） no-reapeat scroll 0 0 / cover padding-box;   background-size需要在background-position后面，并且必须要用"/" 分割；
2. background-origin属性必须要在background-clip属性之前，如果后面只有一个值，则代表的是background-origin的属性值，而backgroun-clip则用默认值代替；
3. background-origin的默认值是padding-box（内边距），此属性将影响到background-position属性（默认从origin内边距左上角开始定位）；如果背景不是no-repeat的话，这个属性是无效的。它会从border-box区域开始显示，这一点很重要！！！
4. background-clip（裁剪/隐藏）的默认属性是border-box（背景图片）；既：从边框---内边距---内容区域都显示；如果设置的值是content-box的时候，则代表只有内容区域的背景显示，替他部分（padding，border）背景（图片或者颜色）隐藏/裁剪；
5. background-color是从元素的边框左上角起到右下角止(虽然有时候会被边框颜色覆盖)，而background-image却不一样，他是从padding边缘的