CSS 小教程：在网格型选择工具上添加渐变背景

新年开始了，要努力，本博客开始 2024 年招商，欢迎各位想推广产品的老板投广告，目前定价 4800/年，亦可增加评测文章、教学文章配合，详情可与我联系。具体详情更新在 本站广告 2024 年招商。

---

好几个月之前，我遇到这样一个需求：

这个东西叫作 Emotional Scale，是一大堆描述情绪的形容词，存在从积极到消极的渐进关系，老板希望我们用颜色给予它们比较明显的区分。于是我就想到这样一种表现方式：

1. 用网格化来布局每个形容词
2. 给它们添加从上至下的渐变背景
3. 再让 ChatGPT 给每个形容词选一个 emoji

最后一项不用多说，直接丢给 ChatGPT 就行。这里重点说下前面两个。

网格化布局用 display:grid + grid-template-columns: repeat(N, minmax(0, 1fr)) 即可，其中 N 可以根据宽度调整成需要的列数。

接下来处理渐变。这里的难点在于，每个小格子是独立的，要维持统一的渐变比较困难。我想到两个方式：

1. 画一个大的渐变背景，然后用 clip-path 抠
2. 通过计算的方式给每个小格子加渐变背景

后面我决定选择第二种方式。我总共有 38 个格子，一行 4 个的话，就是 10 行；有 6 个颜色，刚好每两行是一个过渡。于是一行就应该是 0 -> 50%，如何渐变一半呢？我尝试了一下，发现可以用 -100% 和 200% 来做。

于是我就配合 Vue 开发了这个组件：

<script lang="ts" setup>
function getBgColor(index: number): string {
  const colors = ['#1B4397', '#648EF7', '#5DC264', '#FFAE43', '#F15146', '#b91c1c']; // 总共 6 个颜色
  const start = index / 8 >> 0; // 8个=2行，就是两行完成两个颜色的过渡
  const end = start + 1;
  const line2 = index % 8 >= 4;

  // 借助 CSS 变量完成过渡效果
  return `--tw-gradient-stops: ${colors[start]} ${line2 ? '-100%' : ''}, ${colors[end]} ${line2 ? '' : '200%'}`;
}
</script>

<template lang="pug">
  .grid.grid-cols-4.gap-2
    label.flex.flex-col.justify-center.items-center.bg-base-100.rounded-3xl.w-full.aspect-square.cursor-pointer.bg-gradient-to-b(
      v-for="([label, face], index) in todayDoingsScale"
      class="hover:bg-base-200"
      :style="getBgColor(index)"
      :key="index"
      @click="doSelect"
    )
      input.hidden(
        type="radio"
        name="feel"
        :value="label"
        v-model="score"
      )
</template>

最终完成的效果就如同上面截图所示。

CSS 作为前端开发的必备技能，搞起来别有一番乐趣。新特性不断被添加进来，就有越来越多的功能可以实现，有越来越多的功能可以更容易的实现。相信我们下一步的开发环境和产品体验会更好。

如果各位读者对上面的 CSS 实现有什么问题，或者有其它关于 CSS 的问题，欢迎留言提问。