css---盒模型新增样式
box-shadow
以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。 如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text shadows 规则相同(第一个阴影在最上面)。
默认值: none 不可继承
值：
inset
默认阴影在边框外。
使用inset后，阴影在边框内。
<offset-x> <offset-y>
这是头两个 <length> 值，用来设置阴影偏移量。
<offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。
<offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。
如果两者都是0，那么阴影位于元素后面。
这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。
<blur-radius>
这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。
不能为负值。默认为0，此时阴影边缘锐利。
<spread-radius>
这是第四个 <length> 值。取正值时，阴影扩大；取负值时，阴影.收缩。默认为0，此时阴影与元素同样大。
<color>
阴影颜色，如果没有指定，则由浏览器决定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#test{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 100px;
height: 100px;
background: pink;
text-align: center;
line-height: 100px;
box-shadow: -10px -10px 10px 0px black , 20px 20px 10px -10px deeppink;
}
</style>
</head>
<body>
<div id="test">test</div>
</body>
</html>
-webkit-box-reflect 设置元素的倒影
默认值:none 不可继承
值：（必须是123的顺序）
倒影的方向
第一个值，above, below, right, left
倒影的距离
第二个值，长度单位
渐变
第三个值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
body{
text-align: center;
}
body:after{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img{
vertical-align: middle;
-webkit-box-reflect:left 10px;
}
</style>
</head>
<body>
<img src="img/" width="200" height="200"/>
</body>
</html>
resize CSS 属性允许你控制一个元素的可调整大小性。
（一定要配合overflow：auto使用）
默认值：none 不可继承
值：
none
元素不能被用户缩放。
both
允许用户在水平和垂直方向上调整元素的大小。
horizontal
允许用户在水平方向上调整元素的大小。
vertical
允许用户在垂直方向上调整元素的大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
body{
text-align: center;
}
body:after{
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
div{
display: inline-block;
width: 200px;
height: 200px;
background: pink;
vertical-align: middle;
resize :horizontal;
overflow:auto;
}
</style>
</head>
<body>
<div></div>
</bod
box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列为。
默认值：content-box 不可继承
值
content-box
默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式：
width = 内容的宽度，
height = 内容的高度。
宽度和高度都不包含内容的边框（border）和内边距（padding）。
border-box
width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。
这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
padding: 50px;
background: pink;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
