鼠标经过盒子出现边框（伪元素，定位，css3盒子模型）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<body>

    <div>

        <img src="mi6.png" >

    </div>

</body>

div{

            width: 220px;

            height: 220px;

            position: relative;

        }

        div:hover::after{

            content: "";

            display: block;/* 原先是行内元素，必须转换宽高才有效 */

            width: 100%;/* 宽高100%，因为伪元素的盒子在div内部，是div的100% */

            height: 100%;

            box-sizing: border-box;/* css3内减盒子，添加边框盒子宽高不变 */

            border: 5px solid rgb(218, 198, 198);

            position: absolute;/* 添加的盒子定位到图片上去 */

            left:;

            top:;

        }