Bagaimana untuk Mencapai Sudut Bulat untuk Bahagian Dalam dan Luar Kotak dengan CSS?

Mencapai Sudut Bulat untuk Kedua-dua Bahagian Dalam Kotak dan Sempadannya

Latar Belakang

Mencipta sudut bulat untuk bahagian dalam dan luar kotak boleh meningkatkan daya tarikan visual reka bentuk. Walau bagaimanapun, ia boleh menjadi mencabar untuk mencapai kesan ini tanpa menjejaskan sempadan kedua-dua elemen. Panduan ini meneroka cara untuk mencapai kesan yang diingini menggunakan CSS.

Pengiraan Sempadan Dalaman

Untuk menggunakan sudut bulat pada kotak dalam, anda perlu mengira jejari sempadan dalam . Ini dilakukan dengan menolak lebar sempadan daripada jejari sempadan luar.

• Jejari Sempadan Dalam = Jejari Sempadan Luar - Lebar Sempadan

Dalam ini kes, dengan jejari sempadan luar 6px dan lebar sempadan 5px:

• Jejari Sempadan Dalam = 6px - 5px = 1px

CSS Dikemas kini:

.radius-all { border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }

Menggunakan Sempadan Umum

Jika anda menggunakan kotak berasingan untuk sempadan dan kandungan dalam, gunakan sifat jejari sempadan dan vendornya- versi khusus untuk kedua-dua kotak untuk sudut bulat yang konsisten.

Contoh (Kotak Asing):

<div>

Contoh (Kotak Tunggal):

.rounded-borders {
    border-radius: 5px;
}

<div>

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Sudut Bulat untuk Bahagian Dalam dan Luar Kotak dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!