Mengapakah `jejari sempadan` Menghasilkan Bentuk Berbeza dengan Peratusan berbanding Piksel/ems?

Jejari Sempadan dalam Piksel (%) dan Piksel (px) atau Em

Mengapa Jejari Sempadan Bertindak Berbeza dengan Peratusan dan Piksel?

Jejari-sempadan membolehkan anda mengelilingi penjuru elemen web anda. Walau bagaimanapun, apabila menggunakan peratusan atau piksel, bentuk penjuru berubah.

Nilai Peratusan

Menurut Modul Latar Belakang dan Sempadan CSS Tahap 3, peratusan merujuk kepada dimensi kotak sempadan yang sepadan. Contohnya, jika anda menetapkan jejari sempadan: 50%;, jejari pada paksi X ialah 50% daripada lebar bekas dan jejari pada paksi Y ialah 50% daripada ketinggian bekas. Ini menghasilkan bentuk elips.

Pixel dan Nilai Unit Lain

Menggunakan nilai piksel tunggal atau unit lain (mis., em, in) untuk sempadan- jejari sentiasa menghasilkan elips, atau dalam erti kata lain, bulatan.

Namun, apabila lengkung bertindih, peraturan digunakan yang mengurangkan jejari kepada separuh saiz sisi terkecil. Contohnya, jika anda menetapkan jejari sempadan: 999px; pada elemen yang berukuran 230px x 100px, jejari akan dikurangkan kepada 50px, iaitu separuh ketinggian elemen.

Contoh

Pertimbangkan perkara berikut coretan kod:

.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

/* For the demo : */
div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
  text-align: center;
}

Dengan jejari sempadan: 50%;, sudut akan mempunyai bentuk elips. Dengan jejari sempadan: 115px/50px;, sudut akan mempunyai bentuk elips yang sama memandangkan 115px/50px adalah bersamaan dengan 50% daripada kedua-dua belah untuk elemen yang berukuran 230px x 100px.

Atas ialah kandungan terperinci Mengapakah `jejari sempadan` Menghasilkan Bentuk Berbeza dengan Peratusan berbanding Piksel/ems?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!