Bán kính đường viền tính bằng phần trăm (%) và pixel (px) hoặc em

Nếu tôi sử dụng giá trị pixel hoặc em cho bán kính đường viền, bán kính cạnh luôn là cung tròn hoặc hình viên thuốc ngay cả khi giá trị lớn hơn cạnh lớn nhất của phần tử.

Khi tôi sử dụng tỷ lệ phần trăm , bán kính cạnh là hình elip và bắt đầu ở giữa mỗi cạnh của phần tử dẫn đến hình bầu dục hoặc hình elip :

Giá trị pixel cho bán kính đường viền:

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

<div>border-radius:999px;</div>

Giá trị phần trăm cho bán kính đường viền:

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}

<div>border-radius:50%;</div>

Tại sao bán kính đường viền theo tỷ lệ phần trăm không hoạt động giống như bán kính đường viền được đặt bằng các giá trị pixel hoặc em?

Bán kính biên giới:

Trước tiên, bạn cần hiểu rằng thuộc tính border-radius nhận 2 giá trị. Các giá trị này là bán kính trên trục X / Y của một phần tư hình elip xác định hình dạng của góc.
Nếu chỉ một trong các giá trị được đặt thì giá trị thứ hai bằng giá trị thứ nhất. Vì vậy, border-radius: xtương đương với border-radius:x/x;.

Giá trị phần trăm

Tham khảo các thông số kỹ thuật của W3C: Thuộc tính bán kính đường viền cấp 3 của Mô-đun Nền và Đường viền CSS, đây là những gì chúng ta có thể đọc liên quan đến các giá trị phần trăm:

Phần trăm: Tham chiếu đến kích thước tương ứng của hộp đường viền.

Vì vậy, border-radius:50%;xác định raddi của hình elip theo cách này:

• bán kính trên trục X bằng 50% chiều rộng thùng chứa
• bán kính trên trục Y bằng 50% chiều cao của thùng chứa

Pixel và các đơn vị khác

Sử dụng một giá trị không phải phần trăm cho bán kính đường viền (em, in, đơn vị liên quan đến chế độ xem, cm ...) sẽ luôn dẫn đến một hình elip có cùng bán kính X / Y. Nói cách khác, một vòng tròn .

Khi bạn đặt border-radius:999px;bán kính của hình tròn phải là 999px. Nhưng một quy tắc khác được áp dụng khi các đường cong chồng lên nhau làm giảm bán kính của hình tròn xuống còn một nửa kích thước của cạnh nhỏ nhất. Vì vậy, trong ví dụ của bạn, nó bằng một nửa chiều cao của phần tử: 50px.

Đối với ví dụ này (với phần tử có kích thước cố định), bạn có thể thu được cùng một kết quả với cả px và phần trăm. Như phần tử là 230px x 100px, border-radius: 50%;tương đương với border-radius:115px/50px;(50% của cả hai bên):

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;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>

Chỉ cần chia giá trị đầu tiên cho% bạn muốn .. vì vậy nếu bạn muốn bán kính đường viền là 50%, hãy viết:

border-radius: 25%/50%; 

hoặc một ví dụ khác:

border-radius: 15%/30%;

Bạn có thể dễ dàng làm toán bằng js hoặc SASS.