Dalam CSS Tailwind, ' kotak-hiasan-pecah sifat ” menentukan pemaparan latar belakang, jidar dan pelapik elemen apabila ia merentangi berbilang baris atau lajur. Ia mempunyai dua kelas iaitu, “ hirisan ” dan “ klon ”. Pengguna boleh menggunakan sifat 'box-decoration-break' dengan titik putus dan pertanyaan media untuk menentukan cara reka letak dan penampilan elemen berubah bergantung pada lebar peranti dan menggunakan gaya berbeza berdasarkan titik putus.
Artikel ini akan menunjukkan kaedah menggunakan pemecah hiasan kotak dengan titik putus dan pertanyaan media.
Cara Menggunakan Pecah Hiasan Kotak Dengan Titik Putus dan Pertanyaan Media dalam Tailwind?
Untuk menggunakan pemecah hiasan kotak dengan titik putus dan pertanyaan media, ia diperlukan untuk menentukan nilai dan penggayaan yang berbeza untuk saiz skrin yang berbeza dalam program HTML. Kemudian, lihat halaman web dengan menjalankan program HTML untuk pengesahan.
Untuk pemahaman yang lebih baik, lihat langkah-langkah yang disebutkan di bawah:
Langkah 1: Gunakan Titik Putus dan Pertanyaan Media Dengan Pecah Hiasan Kotak
Buat program HTML dan tentukan nilai dan gaya yang berbeza untuk saiz skrin yang berbeza. Sebagai contoh, kami telah mentakrifkan ' md ” dan “ lg ” titik putus dengan gaya mereka:
< badan >< rentang kelas = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Hello < br />
Linux < br />
Petunjuk
rentang >
badan >
di sini:
- “ bg-teal-600 ” menetapkan warna teal ke latar belakang.
- “ kotak-hiasan-klon ” ialah kelas tersuai yang digunakan untuk hiasan kotak pengklonan.
- “ md:bg-kuning-500 ” menggunakan warna latar belakang kuning pada elemen untuk “ md ” titik putus (skrin bersaiz sederhana).
- “ lg:kotak-hiasan-hirisan ” menetapkan kesan penghirisan pada hiasan kotak untuk “ lg ” titik putus (skrin besar).
- “ teks-putih ” menetapkan warna putih kepada teks.
- “ teks-3xl ” menetapkan saiz fon kepada 3xl.
- “ px-2 ” menambah padding mendatar sebanyak 2 piksel pada elemen .
Langkah 2: Sahkan Output
Untuk memastikan titik putus dan pertanyaan media telah digunakan dengan jayanya, jalankan program HTML dan lihat halaman web:
Ia boleh dilihat bahawa halaman web berubah mengikut mana titik putus dan pertanyaan media ditakrifkan.
Kesimpulan
Untuk menggunakan pemecah hiasan kotak dengan titik putus dan pertanyaan media dalam Tailwind, mula-mula buat fail HTML. Kemudian, gunakan titik putus dan pertanyaan media dalam program HTML dengan menentukan nilai dan gaya yang berbeza untuk saiz skrin yang berbeza. Untuk pengesahan, jalankan program HTML dan lihat halaman web. Artikel ini telah menunjukkan kaedah menggunakan pemecah hiasan kotak dengan titik putus dan pertanyaan media.