Bagaimanakah Saya Boleh Membuat Sempadan CSS Lebih Kecil Daripada Lebar Div yang Mengandunginya?

Membuat Sempadan Lebih Kecil Daripada Lebar Div

Dalam CSS, lebar sempadan biasanya ditentukan oleh lebar elemen itu mengelilingi. Jika anda mahu jidar anda lebih kecil daripada lebar elemen bekasnya, anda boleh menggunakan unsur pseudo. Begini caranya:

 lebar: 200px;<br> tinggi: 50px;   <br> kedudukan: relatif;<br> z-index: 1;<br> latar belakang: #eee;<br>}<p>div:sebelum {<br> kandungan: "";<br> kedudukan : mutlak;<br> kiri: 0;<br> bawah: 0;<br> tinggi: 1px;<br> lebar: 50%;  /<em> atau 100px </em>/<br> sempadan-bawah: 1px solid magenta;<br>}</p>

<div>Item 2</div>

Dalam contoh ini, kami menggunakan pseudoelemen :before untuk mencipta sempadan yang hanya separuh lebar daripada div kontena. Kami melakukan ini dengan menetapkan sifat lebar bagi elemen :before kepada 50% atau lebar yang diingini (cth., 100px). Kami juga meletakkan elemen :before secara mutlak dalam div bekas menggunakan kedudukan: sifat mutlak.

Sifat indeks-z memastikan bahawa elemen :before diletakkan di atas kandungan div kontena. Ini menghalang jidar daripada tersembunyi di sebalik kandungan.

Dengan menggunakan unsur pseudo, anda boleh membuat sempadan yang mempunyai lebar dan kedudukan yang berbeza daripada elemen bekasnya. Fleksibiliti ini membolehkan anda mencipta kesan visual tersuai dan mempertingkatkan reka bentuk halaman web anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Sempadan CSS Lebih Kecil Daripada Lebar Div yang Mengandunginya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!