css3盒模型新增属性

盒模型阴影box-shadow

box-shadow:[inset] x y blur [spread] color

参数：


inset	投影方式 inset:内投影不给：外投影
x、y	阴影偏移
blur	模糊半径
spread	扩展阴影半径先扩展原有形状再2开始画阴影
color

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .box {
        width: 100px;
        height: 100px;
        margin: 100px;
        background: red;
        box-shadow: 0 0 30px 30px #000, inset 0 0 10px #ccc;
    }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

box-reflect倒影

box-reflect
direction	above \	below \	left \	right
距离
渐变（可选）

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    body{
    	background: #000;
    }
    img {
        display: block;
        margin: 200px auto;
        -webkit-box-reflect:right 10px -webkit-linear-gradient(right rgba(0,0,0,1) 0,rgba(0,0,0,0) 70%);
    }
    </style>
</head>

<body>
    <img src="minguo.jpg" />
</body>

</html>

resize自由缩放


both	水平垂直都可以缩放
horizontal	只有水平方向可以缩放
vertical	只有垂直方向可以缩放

要配合overflow：auto来使用，只有水平方向可以缩放

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .box {
        width: 100px;
        height: 100px;
        background: url(minguo.jpg);
        border: 5px solid #000;
        resize: both;
        overflow: auto;
    }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

box-sizing盒模型的解析模式


content-box	标准盒模型 width\	height=border+padding+content
border-box	怪异盒模型

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .box {
        width: 200px;
        height: 200px;
        padding: 50px;
        border: 10px solid #000;
        box-sizing: border-box;
    }

    .div {
        height: 50px;
        background: red;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="div"></div>
    </div>
</body>

</html>