[分享]css十六宫格颜色不同

十六宫格是一种常用的网页布局方式，可以用CSS样式来实现不同的效果。其中，设置每个小格子不同的背景色可以给页面带来更丰富的视觉效果，下面就是一份CSS代码示例，用来设置十六宫格背景颜色。.gridit...

十六宫格是一种常用的网页布局方式，可以用CSS样式来实现不同的效果。其中，设置每个小格子不同的背景色可以给页面带来更丰富的视觉效果，下面就是一份CSS代码示例，用来设置十六宫格背景颜色。

.grid-item {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: #f1c40f;
  margin: 5px;
}
.grid-item:nth-child(2n+1) {
  background-color: #3498db;
}
.grid-item:nth-child(3n+1) {
  background-color: #e74c3c;
}
.grid-item:nth-child(4n+1) {
  background-color: #2ecc71;
} 

上述CSS代码通过nth-child选择器来对每个小格子进行不同背景色的设置。其中，第一个选择器设置所有小格子的背景色为#f1c40f，这是柠檬黄的颜色。接下来的三个选择器则分别对第奇数列、第3、6、9列、第4、8、12、16列的小格子进行设置，分别使用了蓝色、红色和绿色的颜色值。

通过这段CSS代码设置，我们可以得到一个十六宫格，其中每个小格子都有不同的背景色。这样的网页效果可以吸引用户的注意力，增强页面的视觉效果。