利用盒模型来解决鼠标放在图片上显示边框的效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 632px;
        height: 340px;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
    }
    div:hover::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border: 20px solid rgba(255, 255, 255, 0.5);
        box-sizing: border-box;   /*利用内减盒模型*/
    }

    </style>
</head>
<body>
    <div>
        <img src="mi.jpg" alt="">
    </div>
</body>
</html>

 

posted on 2019-01-15 14:05  zengsf  阅读(181)  评论(0)  编辑  收藏  举报

导航