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

最新推荐文章于 2024-02-06 09:22:32 发布

weixin_30596165

最新推荐文章于 2024-02-06 09:22:32 发布

阅读量482

点赞数 1

原文链接：http://www.cnblogs.com/EricZLin/p/8866723.html

版权

<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;
        }