Bagaimanakah Saya Boleh Membuat Sempadan Kecerunan dalam CSS?

Cara Mencapai Sempadan Kecerunan dalam CSS

Menggunakan kecerunan pada sempadan CSS, bertentangan dengan jangkaan, bukanlah semudah yang kelihatan. Manakala warna sempadan sintaks: -moz-linear-gradient(atas, #555555, #111111); mungkin kelihatan intuitif, ia gagal menghasilkan kesan yang diingini.

Untuk berjaya mencipta sempadan kecerunan, anda mesti menggunakan sifat imej sempadan bersama-sama dengan gaya sempadan dan lebar sempadan. Coretan kod berikut menggambarkan cara untuk mencapai perkara ini:

.border {
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-width: 4px;
  border-style: solid;
  padding: 5px;
}

Menggunakan kod ini pada elemen HTML, seperti:

<p class="border">border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1</p>

akan menghasilkan sempadan dengan kecerunan yang beralih daripada kiri ke kanan, menjangkau lebar sempadan yang ditentukan. Ambil perhatian bahawa jejari sempadan tidak akan berfungsi dalam konteks ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Sempadan Kecerunan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!