html九宫格边框

要实现 HTML 九宫格边框可以使用 CSS 的 border 属性，代码如下：

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  border: 2px solid #000;
  padding: 10px;
}

.grid-item {
  background-color: #ccc;
  height: 100px;
}

这里使用了 CSS 的 grid 布局，通过设置 grid-template-columns 属性为 repeat(3, 1fr) 实现了九宫格的效果。同时，通过设置 grid-gap 属性为 10px 实现了格子之间的间距，通过设置 border 属性为 2px solid #000 实现了九宫格的边框，通过设置 padding 属性为 10px 实现了九宫格与边框之间的距离。