web前端——HTML+CSS实现九宫格

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {height: 100vh;display: flex;justify-content: center;align-items: center;background: rgb(224, 212, 203);}.container {width: 300px;height: 300px;display: flex;flex-wrap: wrap;}.container .item {position: relative;box-sizing: border-box;width: 100px;height: 100px;border: 2px solid white;background-image: url(A.jpg);background-size: 300px 300px;}.container .item:nth-child(3n+1) {left: -10px;}.container .item:nth-child(3n+2) {left: 0px;background-position-x: -100px;}.container .item:nth-child(3n+3) {left: 10px;background-position-x: -200px;}.container .item {top: 10px;background-position-y: -200px;}.container .item:nth-child(-n+6) {top: 0px;background-position-y: -100px;}.container .item:nth-child(-n+3) {top: -10px;background-position-y: 0px;}</style>
</head><body><div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
</body></html>