Adakah Kandungan Klip Jejari Sempadan atau Hanya Latar Belakang?

Keratan Jejari Sempadan: Memahami Tingkah Laku

Soalan:

Bolehkah kandungan unsur dengan jejari sempadan melangkaui sempadannya?

Contoh Disediakan:

Pertimbangkan kod HTML dan CSS berikut:

<div class="progressbar">
    <div class="buffer"></div>
</div>

.progressbar {
    height: 5px;
    width: 100px;
    border-radius: 5px;
}

.buffer {
    width: 25px;
    height: 5px;
    background: #999999;
}

Dalam contoh ini, elemen ".buffer" nampaknya melangkaui sudut bulat bekas ".progressbar".

Jawapan:

Ya, tingkah laku ini dimaksudkan oleh reka bentuk.

Penjelasan:

Menurut spesifikasi CSS, sifat limpahan lalai untuk elemen ialah "kelihatan." Ini bermakna kandungan tidak dipotong dan mungkin dipaparkan di luar bekas. Sifat "jejari sempadan" menjepit latar belakang bekas, tetapi jika sifat limpahan ditetapkan kepada "kelihatan", kandungan tidak akan terjejas.

Spesifikasi CSS untuk keratan latar belakang menyatakan bahawa "kesan lain klip itu ke sempadan atau tepi pelapik (seperti 'limpahan' selain daripada 'kelihatan') juga mesti klip ke lengkung." Ini bermakna jika limpahan ditetapkan kepada apa-apa selain daripada "kelihatan", kandungan akan dipotong dalam sudut bulat bekas.

Oleh itu, untuk memastikan kandungan kekal dalam sudut bulat, adalah perlu untuk menetapkan sifat limpahan bekas kepada "tersembunyi," "tatal" atau nilai lain yang tidak "kelihatan". Dengan menetapkan limpahan kepada "tersembunyi" dalam contoh ini, elemen ".buffer" akan dipotong dalam sudut bulat bekas ".progressbar".

Atas ialah kandungan terperinci Adakah Kandungan Klip Jejari Sempadan atau Hanya Latar Belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!