盒子阴影案例

    DoCument

        div {

            width: 200px;

            height: 200px;

            background-color: pink;

            margin: 100px auto;

            /* box-shadow: 10px 10px 10px 10px black; */

            /* 1 2是必需的 */

        }

        /* 原先盒子没有影子，鼠标经过时有阴影效果 */

        div:hover {

            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);

        }

        /* 注意：

        1.默认的是外阴影（outset），但不可以写这个单词，否则导致阴影无效

        2.盒子阴影不占用空间，不会影响其他盒子排列 */