如何用纯CSS实现带浅蓝至白渐变的小方块背景导航栏？

当然可以！纯CSS完全能实现这种带垂直渐变的小方块背景，核心是借助linear-gradient（线性渐变）结合背景平铺属性来搞定，我给你两种实用的实现方案，你可以按需调整：

方案1：平滑过渡的渐变小方块（符合你描述的需求） #

这种方案会让每个小方块从顶部浅蓝色开始，在高度50%的位置平滑过渡到白色，代码非常简洁：

/* 给导航栏添加背景样式 */
.nav-bar {
  /* 定义垂直渐变：从顶部浅蓝色开始，到50%高度处完全变为白色 */
  background-image: linear-gradient(to bottom, #87ceeb, #ffffff 50%);
  /* 设置单个小方块的尺寸，这里是20px×20px，可根据需求调整 */
  background-size: 20px 20px;
  /* 可选：添加导航栏的基础样式，让效果更明显 */
  padding: 1rem;
  gap: 1rem;
  display: flex;
}

对应的HTML结构示例：

<nav class="nav-bar">
  <a href="#">首页</a>
  <a href="#">分类</a>
  <a href="#">关于我们</a>
</nav>

方案2：硬分界的渐变方块（上下半区纯色） #

如果你想要的是精确在50%高度处切换颜色（无渐变过渡），可以用这个写法：

.nav-bar {
  background-image: linear-gradient(to bottom, #87ceeb 50%, #ffffff 50%);
  background-size: 20px 20px;
  /* 同样可选添加基础样式 */
  padding: 1rem;
  display: flex;
  gap: 1rem;
}

自定义技巧 #

你可以根据自己的需求轻松调整效果：

• 调整方块大小：修改background-size的数值，比如30px 30px就是更大的方块，15px 15px则更细密
• 更换渐变颜色：把#87ceeb（浅蓝色）和#ffffff（白色）替换成你需要的色值，比如#a0c4ff（更柔和的浅蓝）或者rgb(240,248,255)（淡青色）
• 调整过渡位置：修改渐变中的百分比，比如#ffffff 60%会让渐变到白色的位置更靠下

这种实现方式完全不需要图片，性能优异，而且适配各种屏幕尺寸~

内容的提问来源于stack exchange，提问作者Jorge