鼠标经过显示边框

        div{
             296px;
            height: 180px;
            margin: 20px auto;
            position: relative;  /*父相*/
        }
        div:hover::before{  /*鼠标经过之后 前面插入一个伪元素*/
            content: '';
             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 都算在宽里面*/
        }


    <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"/>
    </div>