Bagaimanakah Saya Boleh Mencipta Sudut Bulat untuk Kotak Dalam dan Sempadan?

Mencapai Sudut Bulat untuk Kotak Dalam dan Sempadan

Memahami Isu

Matlamatnya adalah untuk mencipta kotak dengan sudut bulat dan sempadan yang juga mempunyai sempadan bulat. Sifat klip latar belakang boleh digunakan untuk mencapai sudut bulat untuk sempadan. Walau bagaimanapun, kotak dalam kekal segi empat tepat.

Mencapai Sudut Bulat Kotak Dalam

Untuk membulatkan bucu kotak dalam, sifat jejari sempadan boleh digunakan. Jejari sempadan dalam dikira sebagai perbezaan antara jejari sempadan luar dan lebar sempadan. Oleh itu, jejari sempadan dalam menjadi:

inner border radius = outer border radius - border width

Jika lebar sempadan lebih besar daripada jejari sempadan, jejari sempadan dalam menjadi negatif, mengakibatkan sudut terbalik. Oleh itu, lebar sempadan perlu dipertimbangkan semasa mengira jejari sempadan dalam.

Mengubah suai Kod

Dalam kod yang disediakan, lebar sempadan ialah 5px dan jejari sempadan luar ialah 10px. Menggunakan formula di atas, jejari sempadan dalam menjadi:

inner border radius = 10px - 5px = 5px

CSS yang diubah suai menjadi:

.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

• Untuk mengelakkan sudut bulat pada sempadan luar, sifat -vendor-background-clip harus ditetapkan kepada kotak sempadan.
• Tindanan warna boleh digunakan dalam JavaScript menggunakan kaedah yang menukar kod warna heks kepada nilai perpuluhan dan melakukan pengiraan yang diperlukan untuk mengurangkan kelegapan.
• Sempadan bulat boleh digunakan pada kedua-dua bahagian dalam dan kotak luar dengan menggunakan elemen kotak yang berasingan atau dengan mencipta sempadan terus pada kotak dalam.
• Kelas sempadan bulat boleh dicipta untuk menggunakan sempadan bulat pada berbilang kotak dengan cekap.

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