Bagaimana untuk Mencipta Sudut Bulat untuk Kedua-dua Kotak Dalam dan Sempadannya dalam CSS?

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

Dalam CSS, sudut bulat boleh digunakan menggunakan jejari sempadan harta, yang menerima nilai dalam piksel atau peratusan. Walau bagaimanapun, apabila menggunakan sifat ini untuk membuat sudut bulat untuk kotak dalam dan sempadannya, anda perlu mempertimbangkan kesan lebar sempadan.

Mengira Jejari Sempadan Dalam

Untuk mengira jejari sempadan dalam, tolak lebar sempadan daripada jejari sempadan luar. Ini memastikan bahawa sudut dalam kotak mempunyai kebulatan yang diingini manakala jidar mengekalkan rupa bulatnya.

Sebagai contoh, jika anda mahukan jejari sempadan luar 6px dan lebar sempadan 5px, jejari sempadan dalam sepatutnya:

inner border radius = 6px - 5px = 1px

Melaraskan CSS Kod

Dalam kod yang disediakan, perubahan berikut perlu dibuat:

.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }

Ini melaraskan jejari sempadan luar kepada 6px. Sifat klip latar belakang harus dialih keluar atau ditetapkan kepada kotak sempadan untuk membolehkan jejari sempadan dalam.

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

Pelapis dan Sempadan

Jika kotak berasingan digunakan untuk sempadan, sifat jejari sempadan mesti digunakan pada kedua-dua kotak sempadan dan kotak dalam. Sebagai alternatif, pendekatan yang lebih cekap ialah mengurus sempadan dalam kotak dalam itu sendiri.

Sempadan Umum

Untuk menggunakan bucu bulat pada berbilang kotak secara konsisten, pertimbangkan untuk menggunakan kelas seperti .rounded-borders dan menerapkannya pada elemen yang berkaitan.

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

<div></div>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Sudut Bulat untuk Kedua-dua Kotak Dalam dan Sempadannya dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!