<!DOCTYPE html>
<html>
<head>
<title>\</title>
</head>
<style type="text/css">
.info{
width: 296px;
height: 180px;
margin: 20px auto;
position: relative; /*父相*/
}
.info:hover::before{ /*鼠标经过之后 前面插入一个伪元素*/
content: '';
width: 100%;
height: 100%;
border: 10px solid rgba(201, 255, 209, 0.4);
display: block; /*转换块级元素 伪元素属于行内元素*/
position: absolute; /*要伪元素不占位,就用绝对定位*/ /*子绝父相*/
top: 0;
left: 0;
box-sizing: border-box; /*把加入border padding 都算在宽里面*/
}
</style>
<body>
<div>
<img src="../images/SuCai/RLs.jpg" height="180" width="296"/>
</div>
<div>
<img src="../images/SuCai/RLs.jpg" height="180" width="296"/>
</div>
<div>
<img src="../images/SuCai/RLs.jpg" height="180" width="296" class="info" />
</div>
</body>
</html>