Bagaimana untuk Mencipta Sudut Bulat untuk Bahagian Dalam dan Luar Kotak dengan Sempadan?

Cara Membuat Sudut Bulat untuk Bahagian Dalam dan Luar Kotak dan Sempadannya

Soalan anda menyerlahkan cabaran untuk mencapai sudut bulat untuk kedua-dua kotak dalam dan sempadannya. Untuk menangani perkara ini, kami akan menyelidiki aspek teknikal CSS dan JavaScript.

Pengiraan Sempadan Dalam

Untuk mendayakan sudut bulat untuk kotak dalam, anda akan perlu melaraskan sifat klip latar belakang kepada kotak sempadan, yang merupakan tetapan lalai.

Selain itu, jejari sempadan dalam dikira dengan menolak lebar sempadan daripada jejari sempadan luar. Jika lebar sempadan lebih besar daripada jejari sempadan, jejari sempadan dalam menjadi negatif, mengakibatkan sudut janggal. Oleh itu, anda perlu mengira jejari sempadan dalam secara manual.

Dalam kes anda, jejari sempadan dalam ialah:

6px - 5px = 1px

Menggunakan Jejari Sempadan

Dengan radius sempadan dalam dikira, anda boleh mengemas kini CSS anda:

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

Menambah Tindanan Warna dengan JavaScript

Untuk menggunakan tindanan warna pada pengepala, anda boleh menggunakan JavaScript:

// Get the background color of the body element
var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;;

// Convert hexadecimal color to RGB (subject to implementation)

// Create a new element for the header
var header = document.createElement('header');

// Set the background color of the header
header.style.backgroundColor = bodyBgColor;

Aplikasi Sempadan Am

Jika anda menggunakan kotak berasingan untuk sempadan, gunakan jejari sempadan pada kedua-duanya sempadan dan kotak dalam. Sebagai alternatif, anda boleh menetapkan kotak dalam untuk mengurus jidarnya sendiri, memudahkan kod.

Dengan menggunakan teknik ini, anda boleh mencapai sudut bulat untuk kedua-dua kotak dalam dan jidarnya.

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