使用css实现九宫格

<style>
    .container{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        width: 500px;
        height: 500px;
        margin: 100px auto;
    }
    /* 定义九宫格中的图像 */
    .img_item{
        background-image: url(图像链接);
        box-shadow: inset 0 0 0 1px #fff;
        background-size: 500px 500px;
        transition: .3s;
    }

    /* 为每个图像设置位置和边距 */
    .container .img_item{
        position: relative;
    }
    .container .img_item:nth-child(3n+1){
        background-position-x: 0;
        left: -20px;
    }
    .container .img_item:nth-child(3n+2){
        background-position-x:-166px;
    }
    .container .img_item:nth-child(3n){
        background-position-x:-332px;
        left: 20px;
    }
    .container .img_item:nth-child(-n+6){
        background-position-y:-166px;
        top: -20px;
    }
    .container .img_item:nth-child(-n+3){
        background-position-y:0;
        top: -40px;
    }
    .container .img_item:nth-last-child(-n+3){
        background-position-y: -332px;
    }
    /* 悬停时重置位置和边距 */
    .container:hover .img_item{
        left: 0;
        top: 0;
        box-shadow: inset 0 0 0 0 #fff;
    }
</style>

<div class="container">
        <div class="img_item"></div>
        <div class="img_item"></div>
        <div class="img_item"></div>
        <div class="img_item"></div>
        <div class="img_item"></div>
        <div class="img_item"></div>
        <div class="img_item"></div>
        <div class="img_item"></div>
        <div class="img_item"></div>
    </div>