Bagaimana untuk mengalih keluar Sempadan Kelabu daripada Butang Tersuai dalam HTML?

Menyesuaikan Penampilan Butang: Mengalih Keluar Sempadan Kelabu

Mencipta butang tersuai dengan menggantikan gaya butang lalai dengan imej boleh meningkatkan daya tarikan visual web anda muka surat. Walau bagaimanapun, anda mungkin menghadapi masalah apabila sempadan kelabu kekal di sekeliling imej tersuai anda. Untuk menghapuskan sempadan ini dan memaparkan imej sahaja, ikut langkah di bawah:

Ubah suai perisytiharan CSS anda untuk butang seperti berikut:

<code class="css">padding: 0;
border: none;
background: none;</code>

Setiap sifat ini menyumbang kepada mengalih keluar jidar kelabu:

• lapik: 0 menghapuskan sebarang pelapik di sekeliling butang, memastikan imej memenuhi seluruh ruang.
• sempadan: tiada mengalih keluar gaya sempadan lalai daripada butang.
• latar belakang: tiada mengalih keluar sebarang warna latar belakang atau imej daripada butang, membenarkan imej tersuai anda menjadi latar belakang.

Berikut ialah contoh penggunaan gaya ini dalam HTML:

<code class="html"><button style="padding: 0; border: none; background: none;"><img src="button-image.png"></button></code>

Untuk melihat demonstrasi praktikal, lawati pautan berikut:

https://jsfiddle. net/Vestride/dkr9b/

Dengan menggunakan gaya ini, anda boleh mengalih keluar jidar kelabu dengan berkesan dan memaparkan imej tersuai anda dengan lancar pada butang.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar Sempadan Kelabu daripada Butang Tersuai dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!