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

Membuat Sudut Bulat untuk Bahagian Dalam Kotak dan Sempadannya

Dalam reka bentuk web, menambah sudut bulat pada kedua-dua bahagian dalam kotak dan sempadannya boleh meningkatkan daya tarikan visual sesuatu elemen.

Mengira Jejari Sempadan Dalam

Untuk mencipta sudut bulat untuk kotak dalam, tentukan jejari sempadan dalam. Ia dikira sebagai perbezaan antara jejari sempadan luar dan lebar sempadan:

inner_border_radius = outer_border_radius - border_width

Sebagai contoh, jika jejari sempadan luar ialah 10px dan lebar sempadan ialah 5px, jejari sempadan dalam ialah 5px.

Melaraskan Sifat CSS

Dalam kod CSS yang disediakan, anda boleh mengalih keluar sifat klip latar belakang khusus vendor (-moz-background-clip dan -webkit-background -klip) atau tetapkannya ke kotak sempadan untuk mencapai jejari sempadan dalam. Selain itu, kemas kini jejari sempadan dalam menggunakan pengiraan yang dinyatakan di atas.

Coretan Kod:

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

.template-bg {
  background: #FFF;
}

.template-border {
  border: 5px solid rgba(255, 255, 255, 0.2);
}

Pertimbangan Tambahan:

• Jika lebar jidar lebih lebar daripada jejari sempadan luar, jejari sempadan dalam akan menjadi negatif, mengakibatkan penjuru terbalik.
• Anda boleh menggunakan jidar bulat pada kotak individu atau buat kelas CSS untuk menjadikannya lebih mudah untuk digunakan pada berbilang elemen.
• JavaScript boleh digunakan untuk menambah tindanan warna pada pengepala dan dengan mudah mendapatkan warna latar belakang badan dalam format perenambelasan untuk konsistensi.

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