Bagaimana untuk Menyesuaikan Panjang dan Kedudukan Hiasan Teks Menggunakan CSS?

Menyesuaikan Panjang dan Kedudukan Hiasan Teks

Dalam usaha anda untuk hiasan teks yang bergaya, anda ingin menjadikan garis bawah lebih menarik secara visual dengan mempelbagaikan panjang dan kedudukannya. Walaupun ia kelihatan mudah, CSS menimbulkan beberapa cabaran.

Pelarasan Panjang

Untuk mengubah panjang garis bawah, gunakan sifat bersaiz latar belakang. Ia menerima dua nilai: lebar dan tinggi garis bawah. Dengan melaraskan nilai ini, anda boleh mengawal panjang garisan.

Pengubahsuaian Kedudukan

Untuk menukar kedudukan garis bawah, ubah suai sifat kedudukan latar belakang. Sifat ini menentukan titik permulaan garis bawah di sepanjang paksi-x (kiri-kanan) dan paksi-y (atas-bawah). Dengan mengubah nilai ini, anda boleh mengalihkan garis bawah ke atas, ke bawah atau ke sisi.

Kecerunan untuk Fleksibiliti

Menggunakan kecerunan untuk hiasan garis bawah menawarkan fleksibiliti yang lebih besar dan kawalan. Tidak seperti garis pepejal, kecerunan membolehkan anda menyesuaikan saiz dan kedudukan dengan mudah.

Kod Contoh

Berikut ialah contoh yang menggambarkan pilihan penyesuaian:

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center; /* Adjust for position */
  background-size: 80% 2px; /* Adjust for length */
  background-repeat: no-repeat;
  padding-bottom: 4px; /* Affects position as well */
}

Kelas Tambahan dengan Variasi:

.small {
  background-size: 50% 1px;
}

.left {
  background-position: bottom left;
}

.center-close {
  background-position: bottom 5px center;
  background-image: linear-gradient(red 0 0);
}

.right {
  background-position: bottom right;
}

.close {
  padding-bottom: 0;
  background-position: bottom 5px center;
  background-image: linear-gradient(blue 0 0);
}

.big {
  background-size: 100% 3px;
}

.far {
  padding-bottom: 10px;
  background-image: linear-gradient(purple 0 0);
}

Dengan kelas ini, anda boleh melaksanakan pelbagai kombinasi panjang dan kedudukan dengan mudah, mencipta kesan teks yang unik dan menarik perhatian.

Atas ialah kandungan terperinci Bagaimana untuk Menyesuaikan Panjang dan Kedudukan Hiasan Teks Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!