当前位置：首页 > CSS

css制作彩虹板

2026-03-12 03:34:26CSS

使用线性渐变创建彩虹背景

在CSS中，可以通过linear-gradient属性创建彩虹效果。设置多个颜色节点，每个颜色代表彩虹的一种颜色。

.rainbow {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  height: 100px;
  width: 100%;
}

添加动画效果使彩虹流动

结合CSS动画，可以让彩虹颜色产生流动效果。使用@keyframes改变渐变角度。

.rainbow-animated {
  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet,
    red
  );
  background-size: 400% 400%;
  animation: rainbow 8s linear infinite;
  height: 100px;
}

@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

创建彩虹边框效果

通过border-image属性可以实现彩虹边框。需要先定义渐变，然后应用到边框。

.rainbow-border {
  border: 10px solid transparent;
  border-image: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  border-image-slice: 1;
  padding: 20px;
}

彩虹文字效果实现

使用背景裁剪技术可以让文字显示彩虹颜色。设置background-clip为text。

.rainbow-text {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3em;
  font-weight: bold;
}

彩虹阴影效果

通过多重text-shadow或box-shadow可以创建彩虹阴影。

css制作彩虹板

.rainbow-shadow {
  text-shadow: 
    2px 2px red,
    4px 4px orange,
    6px 6px yellow,
    8px 8px green,
    10px 10px blue,
    12px 12px indigo,
    14px 14px violet;
  font-size: 3em;
}