Bagaimanakah Saya Boleh Mengawal Rupa Garis Garis Menggunakan Kecerunan CSS?

Cara Mengawal Penampilan Garis bawah

Garis bawah boleh disesuaikan untuk meningkatkan daya tarikan visual dan kebolehbacaan. Untuk memanipulasi panjang dan kedudukan teks-hiasan:garis bawah, terdapat teknik yang mudah tetapi berkesan melibatkan penggunaan kecerunan:

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center;
  background-size: 80% 2px;
  background-repeat: no-repeat;
  padding-bottom: 4px;
}

Pelarasan Kedudukan:

• Untuk mengalihkan garisan, laraskan sifat kedudukan latar belakang.
• Sebagai contoh, kedudukan latar belakang: kiri bawah; menjajarkan garisan ke kiri teks.

Pelarasan Panjang:

• Untuk mengawal panjang, laraskan sifat saiz latar belakang.
• Contohnya, saiz latar belakang: 50% 1px; mencipta baris yang lebih pendek.

Penyesuaian Tambahan:

• Dekat dengan Teks: padding-bottom: 0; mendekatkan garisan kepada teks.
• Jauh daripada Teks: padding-bottom: 10px; meningkatkan jarak antara baris dan teks.
• Warna Berbeza: Sesuaikan warna garisan dengan mengubah suai sifat imej latar belakang, cth., imej latar belakang: linear-gradient(red 0 0 );.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengawal Rupa Garis Garis Menggunakan Kecerunan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!