Loading

鼠标经过盒子出现边框（伪元素，定位，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: 0;
            top: 0;
        }

 

posted @ 2018-04-17 15:06  澎湃_L  阅读(307)  评论(0)  编辑  收藏  举报