如何为单个表格单元格设置渐变背景？周期表元素背景实现求助

HTML本身无法实现渐变背景效果，必须搭配CSS来完成。下面是一个基础的可直接运行的示例，帮你快速实现参考图中的渐变单元格效果：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 周期表容器：用网格布局排列单元格 */
    .periodic-table {
      display: grid;
      grid-template-columns: repeat(8, 80px); /* 一行8个单元格，可按需调整 */
      gap: 5px;
      padding: 15px;
    }

    /* 元素单元格基础样式 */
    .element-cell {
      width: 80px;
      height: 80px;
      border: 1px solid #222;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 5px;
      color: #fff;
      font-family: Arial, sans-serif;
    }

    /* 不同单元格的渐变样式，对应参考图效果 */
    .cell-noble {
      /* 右上到左下的蓝紫色渐变 */
      background: linear-gradient(to bottom left, #6366f1, #4f46e5);
    }

    .cell-alkali {
      /* 左到右的橙黄色渐变 */
      background: linear-gradient(to right, #f59e0b, #d97706);
    }

    .cell-alkaline {
      /* 下到上的浅绿色渐变 */
      background: linear-gradient(to top, #10b981, #059669);
    }

    .cell-metalloid {
      /* 中心向外的径向渐变 */
      background: radial-gradient(circle, #8b5cf6, #7c3aed);
    }
  </style>
</head>
<body>
  <div class="periodic-table">
    <div class="element-cell cell-alkali">
      <span style="font-size: 18px;">Li</span>
      <span style="font-size: 12px; opacity: 0.8;">3</span>
    </div>
    <div class="element-cell cell-alkaline">
      <span style="font-size: 18px;">Be</span>
      <span style="font-size: 12px; opacity: 0.8;">4</span>
    </div>
    <div class="element-cell cell-metalloid">
      <span style="font-size: 18px;">B</span>
      <span style="font-size: 12px; opacity: 0.8;">5</span>
    </div>
    <div class="element-cell cell-noble">
      <span style="font-size: 18px;">Ne</span>
      <span style="font-size: 12px; opacity: 0.8;">10</span>
    </div>
  </div>
</body>
</html>

关键知识点说明 #

• linear-gradient()：线性渐变函数，第一个参数是渐变方向（如to bottom left表示从右上到左下），后续参数是过渡的颜色值，可自定义任意颜色组合
• radial-gradient()：径向渐变函数，适合实现从中心向外扩散的渐变效果，对应参考图中部分单元格的样式
• 把CSS写在HTML的<style>标签内，无需单独创建CSS文件，适配你目前的需求
• 通过给不同类型的元素单元格添加不同类名，可快速批量设置同类型元素的渐变样式

内容的提问来源于stack exchange，提问作者anony.nons