Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mengawal Rupa Garis Garis Menggunakan Kecerunan CSS?

Bagaimanakah Saya Boleh Mengawal Rupa Garis Garis Menggunakan Kecerunan CSS?

Barbara Streisand
Lepaskan: 2024-11-06 20:29:03
asal
459 orang telah melayarinya

How Can I Control the Appearance of Underlines Using CSS Gradients?

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;
}
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan