CSS

を使用した多色の境界線の作成質問に記載されている画像は、複数の色の境界線を示しています。この境界線は、擬似要素を使用せずに作成できますが、むしろ線形勾配とともに境界イメージのプロパティを使用することで作成できます。それを達成する方法は次のとおりです。 幅：150px; 高さ：150px; テキストアライグ：センター; ボーダートップ：5pxソリッド; 境界像：線形勾配（右、灰色25％、黄色25％、黄色50％、赤50％、赤75％、ティール75％）5; }

.fancy-border {
  width: 150px;
  height: 150px;
  text-align: center;
  border-top: 5px solid;
  border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%, red 50%, red 75%, teal 75%) 5;
}

  my content

幅、高さ、およびテキストアライグプロパティdiv要素のサイズとアラインメント。境界線の幅に及ぶ線形勾配を参照し、灰色、黄色、赤、ティールを交互に色を付けます。ピクセル。