CSS3 新增盒子模型相关样式

3 CSS3 新增盒子模型相关样式

① box-sizing 属性

该属性可以规定 width 和 height 设置的是内容宽高还是盒子总宽高，值如下：

content-box		默认值，规定width和height设置的是内容宽高
border-box		规定width和height设置的是盒子总宽高（设置盒子为IE的怪异模式）

② 盒子阴影 box-shadow

该属性可以为元素添加阴影效果，值设置规则如下：

box-shadow: 10px 10px;  /*只设置阴影的偏移位置*/
box-shadow: 10px 10px #ccc;  /*设置阴影偏移位置和颜色*/
box-shadow: 10px 10px 5px #ccc;  /*设置偏移位置 模糊值 颜色*/
box-shadow: 10px 10px 5px 10px #ccc;  /*设置偏移位置 模糊值 外延值 颜色*/
box-shadow: 10px 10px 5px 10px #ccc inset;  /*设置偏移位置 模糊值 外延值 颜色 内阴影*/

/* 设置多个阴影 */
box-shadow: 2px 0 5px cyan, 
            0 -2px 5px #f90,
            0 2px 5px purple,
            -2px 0 5px pink;  

③ 不透明度 opacity

设置盒子的整体不透明度，值是0到1之间的小数，数字越大越不透明，1完全不透明，0完全透明。

4 CSS3 新增背景属性

4.1 新增属性

① background-origin

该属性设置背景图像定位的原点，值如下：

padding-box		默认值,原点在元素左上角内边距
border-box      原点在元素左上角边框上
content-box     原定在内容的左上角

② background-clip

该属性设置哪些区域内背景图像可以显示，值如下：

border-box		边框、内边距、内容上的背景图像可见
padding-box	    内边距和内容上的背景图像可见
content-box     内容上的背景图像可见
text			只有文字上的背景图像可见，需要加私有前缀且文字要设置为透明色

-webkit-background-clip: text;
color: transparent;

③ background-size

该属性可以调整背景图像的尺寸，设置有两种设置形式：

指定两个长度设置背景图像尺寸：

1. 第一个值是背景图像宽度，第二个值是背景图像高度
   background-size: 400px 60px;

2. 使用百分比设置长度，宽度参照元素宽度，高度参照元素高度

3. 如果只设置一个值，被认为是图像宽度，高度根据比例自动计算

使用关键字设置背景图像尺寸：

contain		保证图片比例，优先保证整个图像显示完整，可能造成元素部分区域没有图像
cover		保证图片比例，优先保证元素每个地方都有图像，可能造成背景图像显示不完整， 推荐

4.2 background 复合属性

1. background-origin 和 background-clip 值的形式是一样的，复合属性中只写一个值，表示同时设置两个属性；写两个值，第一个是origin，第二个是clip
2. 如果复合属性需要同时设置 position 和 size，两个必须写一起，且中间使用 / 分开。

background: url(../images/bg03.jpg) no-repeat content-box border-box 10px 10px/50% 50%;
background: url(../images/bg03.jpg) no-repeat content-box border-box 10px 10px/cover;

4.3 多背景图

CSS3 允许在一个元素上设置多个背景图。

background: url(../images/bg-tl.png) no-repeat,
            url(../images/bg-tr.png) no-repeat right top,
            url(../images/bg-bl.png) no-repeat left bottom,
            url(../images/bg-br.png) no-repeat right bottom;

总结

总结：
1. CSS3新增的长度单位和新增的颜色设置方式
2. CSS3的选择器
   基本选择器
   层级选择器
   属性选择器
   伪类选择器
   	   动态伪类选择器（5）
   	   目标伪类选择器（1）
   	   语言伪类选择器（1）
   	   UI元素伪类选择器（3）
   	   结构伪类选择器（12）
   	   否定伪类选择器（1）
   伪元素选择器
3. 盒子相关演示： box-sizing、box-shadow、opacity
4. 背景新增演示： background-orign background-clip  background-size
               复合属性、元素设置多个背景图像