HTML怎么做棋盘格背景_html CSS棋盘格纹理背景【面试必备】-html教程-PHP中文网

用 linear-gradient 实现棋盘格最省事，需两层45°渐变配合精确的 background-size 和颜色停靠点（25%/75%），避免漏缝或变形；grid 适合语义化与可访问性场景；canvas 适用于动态交互但需手动处理像素对齐与重绘。

html怎么做棋盘格背景_html css棋盘格纹理背景【面试必备】

用 `linear-gradient` 画纯 CSS 棋盘格背景最省事

直接写两层 45° 渐变就能出效果，不依赖图片、不触发重排，缩放也清晰。关键在偏移量和重复尺寸的配合。

常见错误是只写一层渐变，结果出来是斜线或条纹，不是方格；或者 background-size 没配对，格子拉伸变形。

background-image 必须包含两个方向的 linear-gradient：一个横向主导，一个纵向主导（实际常都用 45° 配合偏移模拟）
background-size 要设成相同宽高，比如 20px 20px，否则格子变菱形或压扁
颜色停靠点必须严格控制在 25% 和 75% 附近，例如 rgba(0,0,0,0.1) 25%, transparent 25%，少 1% 就漏缝
IE10+ 支持，IE9 及以下需回退到 filter: progid:DXImageTransform.Microsoft.gradient 或切图

body {
  background-image:
    linear-gradient(45deg, #000 25%, transparent 25%),
    linear-gradient(-45deg, #000 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #000 75%),
    linear-gradient(-45deg, transparent 75%, #000 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

Canvas 绘制动态棋盘格适合需要响应式或交互的场景

当格子要随容器缩放、点击高亮某格、或叠加动画时，canvas 比 CSS 更可控。但注意它不自动响应父容器尺寸变化，得手动监听 resize。

容易踩的坑是没清空画布就重绘，导致旧格子残留；或用 fillRect 逐个画 8×8 时坐标算错，尤其起始偏移没对齐 canvas 像素边界，线条发虚。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

获取 canvas 实际渲染尺寸要用 canvas.width/canvas.height，不是 CSS 设置的宽高
格子边长建议取整数，避免 subpixel 渲染模糊；可用 ctx.imageSmoothingEnabled = false 强制硬边
绘制前务必调用 ctx.clearRect(0, 0, width, height)，否则多次 resize 后越来越糊
如果格子数固定（如国际象棋 8×8），用双重 for 循环比 strokeRect + fillStyle 切换更稳

Grid 布局生成 HTML 棋盘格适用于需要语义化或可访问性的场合

比如围棋/象棋棋盘要支持键盘导航、屏幕朗读，或后续要往格子里插棋子 DOM 节点，display: grid 是比绝对定位或 float 更现代的选择。

问题常出在 grid-gap 和边框共存导致尺寸错乱，或没设 grid-template-columns/rows 导致列数不固定。

用 repeat(8, 1fr) + aspect-ratio: 1 保证正方形格子，比写死 50px 更灵活
黑白交替用 :nth-child(odd) 不够——得结合行号，推荐用 grid-row 和 grid-column 计算奇偶性，或 JS 动态加类
若格子内容是文字（如 A1、H8），记得加 text-align: center 和 line-height 居中，别只靠 padding
避免用 float 布局棋盘——它已过时，且父子脱离文档流后高度塌陷，调试极难