Yüzde (%) ve piksel (px) veya em cinsinden kenarlık yarıçapı

Kenarlık yarıçapı için bir piksel veya em değeri kullanırsam, kenar yarıçapı, değer öğenin en büyük kenarından büyük olsa bile her zaman dairesel bir yay veya hap şeklidir .

Yüzdeleri kullandığımda , kenar yarıçapı eliptiktir ve öğenin her iki yanının ortasından başlayarak oval veya elips bir şekil oluşturur :

Kenarlık yarıçapı için piksel değeri:

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>

Kenarlık yarıçapı için yüzde değeri:

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>

Yüzde cinsinden kenarlık yarıçapı neden piksel veya em değerleriyle ayarlanan kenarlık yarıçapı ile aynı şekilde davranmıyor?

Sınır yarıçapı:

Öncelikle, border-radius özelliğinin 2 değer aldığını anlamanız gerekir. Bu değerler, köşenin şeklini tanımlayan çeyrek elipsin X / Y eksenindeki yarıçaplardır.
Değerlerden yalnızca biri ayarlanırsa, ikinci değer ilkine eşittir. Yani border-radius: xeşdeğerdir border-radius:x/x;.

Yüzde değerleri

W3C özelliklerine atıfta bulunarak: CSS Arka Planları ve Kenarlıklar Modülü Seviye 3 border-radius özelliği , yüzde değerleriyle ilgili okuyabileceğimiz şey:

Yüzdeler: Kenarlık kutusunun karşılık gelen boyutuna bakın.

Yani border-radius:50%;elipsin raddisini şu şekilde tanımlar:

• X eksenindeki yarıçap , kap genişliğinin % 50'si kadardır
• Y eksenindeki yarıçap , konteyner yüksekliğinin % 50'si kadardır

Piksel ve diğer birimler

Kenarlık yarıçapı için yüzde dışında bir değer kullanmak (em, in, görüntü alanıyla ilgili birimler, cm ...) her zaman aynı X / Y yarıçapına sahip bir elips ile sonuçlanacaktır. Başka bir deyişle, bir daire .

border-radius:999px;Çemberin yarıçapını ayarladığınızda 999px olmalıdır. Ancak , eğriler üst üste geldiğinde çemberin yarıçapını en küçük kenarın yarı boyutuna düşürdüğünde başka bir kural uygulanır . Yani örneğinizde bu, elemanın yüksekliğinin yarısına eşittir: 50px.

Bu örnek için (sabit boyutlu bir öğeyle) aynı sonucu hem piksel hem de yüzdelerle elde edebilirsiniz. Öğe olduğu 230px x 100pxgibi border-radius: 50%;, şuna eşittir border-radius:115px/50px;(her iki tarafın% 50'si):

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>

İlk değeri istediğiniz yüzdeye bölmeniz yeterlidir.% 50'lik bir kenarlık yarıçapı istiyorsanız şunu yazın:

border-radius: 25%/50%; 

veya başka bir örnek:

border-radius: 15%/30%;

Matematiği js veya SASS'de kolayca yapabilirsiniz.