إنشاء حدود متعددة الألوان مع CSS

تعرض الصورة المقدمة في السؤال حدود بألوان متعددة. يمكن إنشاء هذه الحدود دون استخدام عناصر زائفة ، بل عن طريق استخدام خاصية صورة الحدود إلى جانب التدرج الخطي. إليك كيفية تحقيق ذلك:

تنفيذ الكود

.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. يشير إلى التدرج الخطي الذي يمتد على عرض الحدود ، مع ألوان تتناوب بين الرمادي والأصفر والأحمر والطيور.

وحدات البكسل.