css实现带边框的九宫格_css 九宫格边框-CSDN博客

该博客展示了如何使用CSS3的:nth-child选择器创建一个简单的九宫格布局。代码示例中，每个小格子都是相对定位的浮动元素，通过设置边距和宽高来实现网格间隔，hover状态下背景色改变，适用于响应式设计。需要注意的是，:nth-child伪类在某些老版本浏览器中可能不被支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果如下：

废话不多说直接上代码

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>CSS九宫格</title>
  <style>
    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .nineFrame {
      width: 99px;
      height: 99px;
    }

    .nineFrame .frameItem {
      position: relative;
      float: left;
      z-index: 1;
      overflow: hidden;
      box-sizing: border-box;
      cursor: pointer;
      width: 33px;
      height: 33px;
      border: 1px solid #999;
      margin-top: -1px;
      margin-left: -1px;
    }

    .nineFrame .frameItem:nth-child(1),
    .nineFrame .frameItem:nth-child(2),
    .nineFrame .frameItem:nth-child(3) {
      margin-top: 0;
    }

    .nineFrame .frameItem:nth-child(1),
    .nineFrame .frameItem:nth-child(4),
    .nineFrame .frameItem:nth-child(7) {
      margin-left: 0;
    }

    .nineFrame .frameItem:hover {
      background-color: #bfa
    }
  </style>
</head>

<body>
  <div class="nineFrame">
    <div class="frameItem"></div>
    <div class="frameItem"></div>
    <div class="frameItem"></div>
    <div class="frameItem"></div>
    <div class="frameItem"></div>
    <div class="frameItem"></div>
    <div class="frameItem"></div>
    <div class="frameItem"></div>
    <div class="frameItem"></div>
  </div>
</body>

</html>

nth-child是css3的产物，可能存在一定的兼容性，