css3-颜色背景盒模型

颜色

 rgba(255,0,0,0.1)

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。
A 透明度 取值范围0~1

背景

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

background-size: length|percentage|cover|contain;

1. length第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
2. percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。同样如果只设置一个值，则第二个值会被设置为 “auto”。
3. cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
4. contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。但不能保证铺满盒子。

背景原点

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

1. padding-box背景图像相对于内边距框来定位。也是默认值。
2. border-box背景图像相对于边框盒来定位。
3. content-box背景图像相对于内容框来定位。

背景裁剪

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

1. border-box背景被裁剪到边框盒。默认值。
2. padding-box背景被裁剪到内边距框。
3. content-box背景被裁剪到内容框。

对于background-clip, 其关键字是指将背景图片以border的尺寸、以padding的尺寸，以content的尺寸进行切割，其得到的结果是不完整的背景，也就是其中的一部分(原理与截图差不多)。而且有一点要注意，background-clip的切割是对这个容器背景的切割(包括图片与背景颜色)。
对于background-origin，其关键字是指将背景图片放置到border范围内，padding范围内、content范围内，其得到的结果是完整的背景(原理与图片的缩放相似)。与background-clip不同的是，它只是单纯设置背景图片的边界，并不会对背景颜色造成影响。

盒模型

box-sizing: content-box|border-box|inherit;

1. content-box这是由 CSS2.1规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。默认值。实际的宽=width+padding+border
2. border-box为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。width =border+padding+内容的宽
3. inherit规定应从父元素继承 box-sizing 属性的值。