Bagaimana untuk Mencegah Sempadan Berganda dalam CSS: Garis Besar lwn. Margin Negatif?

Mary-Kate Olsen
Lepaskan: 2024-10-26 19:42:03
asal
187 orang telah melayarinya

How to Prevent Double Borders in CSS: Outline vs. Negative Margins?

Mengelakkan Sempadan "Berganda" dalam CSS

Apabila dua elemen bersebelahan dengan sempadan diletakkan bersebelahan, ia mungkin kelihatan seolah-olah mempunyai sempadan dua di persimpangan tempat mereka bertemu. Untuk mengelakkan artifak visual ini, pertimbangkan teknik CSS berikut:

Menggunakan Outline Daripada Sempadan

Untuk elemen yang mungkin muncul dalam sebarang susunan, sifat garis besar menyediakan yang boleh dipercayai penyelesaian:

<code class="css">.collection {
  /* Optional styles if needed */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  outline: 1px solid;
  margin-top: 1px;
  margin-left: 1px;
}</code>
Salin selepas log masuk

Jing Negatif

Sebagai alternatif, menggunakan jidar negatif pada elemen kanak-kanak secara berkesan akan "memadam" sempadan berganda:

<code class="css">.collection {
  /* Optional styles if needed */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  margin-top: -1px;
  margin-left: -1px;
}</code>
Salin selepas log masuk

Nota untuk Penyemak Imbas Lama

Harta garis besar tidak disokong dalam penyemak imbas lama seperti IE7 dan lebih awal. Dalam kes ini, pendekatan margin negatif disyorkan.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Sempadan Berganda dalam CSS: Garis Besar lwn. Margin Negatif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
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
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!