语法： box-sizing: content-box|border-box|inherit; 属性说明： content-box：在已设定的宽度和高度之外绘制元素的内边距和边框。 border-box： 在已设定的宽度和高度之内绘制元素的内边距和边框。 浏览器支持： IE8+、火狐、谷歌。 代码演示：
/*css:改变元素的box-sizing属性值查看变化*/ .op { width: 100px; height: 100px; background: red; margin-top: 20px; padding: 20px; border: 6px solid #000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*html*/ <div class="op"></div>用处： 两行宽度50%布局：如果不用这个属性，设置border后右边的div会下来错位，设置这个属性，宽度还是50%而不是50%+*px,两行可以并列显示。 input框：加了padding 和border之后，实际的宽度还是最初设置的宽高。
语法： background-size: length|percentage|cover|contain; 属性说明：
值描述length设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
percentage以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
<!-- 调整背景图片的大小：background-size:63px 100px; --> div {background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; } <!-- 对背景图片进行拉伸，使其完成填充内容区域：background-size:40% 100%; --> div {background:url(bg_flower.gif); -moz-background-size:40% 100%; /* 老版本的 Firefox */ background-size:40% 100%; background-repeat:no-repeat; }背景图片可以放置于 content-box、padding-box 或 border-box 区域
<!-- 在 content-box 中定位背景图片：background-origin:content-box; --> div {background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; background-origin:content-box; }语法： box-shadow: h-shadow v-shadow blur spread color inset; 属性说明：
值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。spread可选。阴影的尺寸。color可选。阴影的颜色。请参阅 CSS 颜色值。inset可选。将外部阴影 (outset) 改为内部阴影。代码及效果图： 代码：多重边框
