CSS3(四)——背景&伸缩盒&变换4. flex-direction: 伸缩方向 5. 注意这几个都要设置在父元素上

背景

添加背景图 background:url("") repeat/no-repeat
为背景图片设置大小backgroud-size:200px 200px
背景原点 background-origan:

border-box 背景图从边框开始
padding-box 默认状态下从padding开始
content-box 背景图从内容开始

border-shadow ：5px 5px 5px red; 边框阴影

<style>
    #first{
        height: 400px;
        width: 400px;
        border: 5px solid pink;
        box-shadow: 5px 5px 5px skyblue;
        /* box-shadow 边框阴影 左右 上下 虚化程度 颜色 */
        background: url("./img/15.jpg");
        background-size: 400px 400px;
        /* 改变背景图片大小 */

    }
    #second{
        height: 400px;
        width: 200px;
        border: 5px solid pink;
        box-shadow: 5px 5px 5px skyblue;
        /* box-shadow 边框阴影 左右 上下 虚化程度 颜色 */
        background: url("./img/15.jpg") no-repeat;
        background-size: contain;
        /* 改变背景图片大小 cover等比缩放直到完全覆盖容器 contain 等比缩放与宽度或者高度相等的情况 */

    }
</style>
<body>
    <div id="first"></div>
    <div id="second"></div>
    <!-- 
        盒模型
        box-sizing: 
        content-box 标准盒模型  width = width + padding + border
        border-box 怪异盒模型 width = width
        标准盒模型与怪异盒模型的转换 box-sizing:content-box
        button 是一个典型的怪异盒模型
     -->
</body>
</html>