Bagaimanakah Saya Boleh Mencipta Sempadan CSS Berasaskan Peratusan Hanya Menggunakan CSS?

Sempadan CSS: Menetapkan Ketebalan dalam Peratusan: Pendekatan CSS Sahaja

Walaupun sempadan CSS tidak menyokong peratusan asli, terdapat penyelesaian CSS sahaja yang bijak untuk mencapai kesan ini.

Elemen Pembungkus Sihir

Untuk mensimulasikan sempadan peratusan, gunakan elemen pembalut dengan sifat berikut:

1. Warna latar belakang: Tetapkan warna latar belakang elemen pembalut kepada warna jidar yang diingini .
2. Padding: Tetapkan padding elemen pembalut dalam peratusan untuk mencipta ilusi lebar sempadan.
3. Warna latar belakang elemen: Tetapkan warna latar belakang elemen dalam pembalut kepada warna yang dikehendaki (lutsinar atau sebaliknya).

Contoh Kod:

Untuk menunjukkan, berikut ialah kod HTML dan CSS untuk mencipta elemen dengan sisi lebar 25% "sempadan":

HTML:

<div class="faux-borders">
    <div class="content">
        This is the element to have percentage borders.
    </div>
</div>

CSS:

.faux-borders {
    background-color: #f00;
    padding: 1px 25%; /* set padding to simulate border */
}
.content {
    background-color: #fff;
}

Teknik ini meniru sempadan peratusan dengan menggunakan padding pada elemen pembalut untuk mencipta ilusi.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Sempadan CSS Berasaskan Peratusan Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!