Mengapa Kandungan Melangkaui Sudut Bulat dalam Reka Bentuk Web?

Sudut Bulat dan Keratan Kandungan: Dijangka atau Tidak Dijangka?

Dalam reka bentuk web, penggunaan sudut bulat (jejari sempadan) selalunya dikehendaki untuk mencipta reka letak yang menarik secara visual. Walau bagaimanapun, isu yang membingungkan timbul apabila kandungan nampaknya melangkaui tepi bulat bekasnya.

Case in Point:

Pertimbangkan HTML dan CSS berikut:

.progressbar { height: 5px; width: 100px; border-radius: 5px; }
.buffer { width: 25px; height: 5px; background: #999999; }

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

Dalam contoh ini, div dengan kelas "progressbar" mempunyai bucu bulat, tetapi div di dalamnya ("penampan") nampaknya terlepas daripada kekangan ini dan memanjang di luar tepi melengkung.

Kebenaran Terbongkar:

Anehnya, tingkah laku ini dimaksudkan oleh pelayar web. Menurut spesifikasi CSS, nilai limpahan lalai untuk elemen (termasuk div) ialah "kelihatan", yang membenarkan kandungan melangkaui sempadan elemen.

Namun, sifat "jejari sempadan" hanya mempengaruhi latar belakang elemen dan tidak menjepit kandungannya. Untuk klip kandungan ke sempadan melengkung, nilai limpahan mesti ditetapkan kepada nilai selain daripada "kelihatan", seperti "tersembunyi" atau "tatal."

Nirvana Penyelesaian:

Untuk menyelesaikan isu ini, hanya tetapkan sifat limpahan bekas ("progressbar") kepada "tersembunyi", seperti yang dilihat dalam coretan diubah suai ini:

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

Dengan berbuat demikian, kandungan dalam bekas itu akan digunting dengan betul ke tepi melengkung, memberikan anda kesan visual yang diingini.

Atas ialah kandungan terperinci Mengapa Kandungan Melangkaui Sudut Bulat dalam Reka Bentuk Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!