Bagaimanakah Saya Boleh Menyesuaikan Panjang Garis Bawah dan Kedudukan Menggunakan Kecerunan CSS?

Menggayakan Garis Bawah: Mengawal Panjang dan Kedudukan

Garis bawah biasanya digunakan untuk menekankan teks. Walau bagaimanapun, mereka往往 terhad kepada panjang dan kedudukan tetap, meninggalkan had pada penyesuaian. Panduan ini meneroka cara mengubah panjang dan kedudukan garis bawah menggunakan kecerunan CSS.

Menggunakan Kecerunan

Kecerunan menyediakan cara yang fleksibel untuk memanipulasi garis bawah. Dengan menggunakan kecerunan latar belakang, anda boleh melaraskan kedua-dua saiz dan kedudukan bahagian bergaris.

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center; /* Adjust position */
  background-size: 80% 2px; /* Control length and height */
  background-repeat: no-repeat;
  padding-bottom: 4px; /* Can also affect position */
}

Melaraskan Panjang dan Kedudukan

Dengan mengubah suai saiz latar belakang harta, anda boleh mengawal panjang dan ketinggian garis bawah. Contohnya:

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

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

Untuk meletakkan semula garis bawah, laraskan sifat kedudukan latar belakang. Sebagai contoh:

.left {
  background-position: bottom left;
}

.center-close {
  background-position: bottom 5px center;
}

.right {
  background-position: bottom right;
}

Kawalan Tambahan

Harta padding-bottom juga boleh digunakan untuk memperhalusi kedudukan garis bawah, terutamanya apabila digunakan bersama dengan sifat kedudukan latar belakang.

.close {
  padding-bottom: 0;
  background-position: bottom 5px center;
}

.far {
  padding-bottom: 10px;
}

Contoh

<span class="underline">This is a sentence</span>. I would like <span class="underline close">some words to have</span> longer <span class="underline left">underlines</span> than others. I would <span class="underline big center-close">also like</span> to be able to change the <span class="underline small right">position</span> of the <span class="underline big">underline</span>(to
<span class="underline far">be centered under the word, for example</span>).

Contoh ini menunjukkan pelbagai pelarasan panjang dan kedudukan yang dimungkinkan oleh kecerunan CSS.

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