Bagaimanakah Saya Boleh Mencipta Sempadan Berbilang Warna dalam CSS Menggunakan Hanya `border-image`?

Mencipta Sempadan Berbilang Warna dengan CSS

Imej yang disediakan dalam soalan mempamerkan jidar dengan berbilang warna. Sempadan ini boleh dibuat tanpa menggunakan unsur pseudo, sebaliknya dengan menggunakan sifat imej sempadan bersama-sama dengan kecerunan linear. Begini cara untuk mencapainya:

Pelaksanaan Kod

.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;
}

<div class="fancy-border">
  my content
</div>

Penjelasan

Dalam coretan kod di atas :

• Sifat lebar, tinggi dan penjajaran teks konfigurasikan saiz dan penjajaran elemen div.
• Sifat atas sempadan mentakrifkan sempadan atas div.
• Sifat imej sempadan ialah kunci untuk mencipta sempadan berbilang warna . Ia merujuk kecerunan linear yang merentangi lebar sempadan, dengan warna berselang-seli antara kelabu, kuning, merah dan kuning.
• Angka 5 di hujung sifat imej sempadan mewakili lebar kecerunan dalam piksel.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Sempadan Berbilang Warna dalam CSS Menggunakan Hanya `border-image`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!