Bu CSS:

div {
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}

Aşağıdaki daireyi nasıl üretiyor?

Bir dikdörtgen genişliği 180 piksel ve yüksekliği 180 piksel ise, şöyle görünür:

Sınır yarıçapı 30 piksel uygulandıktan sonra şu şekilde görünecektir:

Dikdörtgen küçülüyor, yani yarıçap boyutu arttığında neredeyse kaybolacak.

Peki, 180 piksellik bir kenarlık 180 piksel height/width-> 0pxyarıçaplı bir daire haline nasıl gelir?

Yükseklik / genişlik> 0 piksel olan 180 piksel kenarlık, 180 piksel yarıçaplı bir daire haline nasıl gelir?

Bunu iki soruya dönüştürelim:

Nerede widthve heightgerçekten başvurmak?

Tipik bir kutunun ( kaynak ) alanlarına bir göz atalım :

heightVe widthdoğru kutu modeli (hayır tuhaflıklar modu, hiçbir eski Internet Explorer) kullanılıyorsa, yalnızca içeriğine uygulanır.

Nerede border-radiusgeçerlidir?

border-radiusÇerçeve-kenarında uygulanır. Dolgu veya kenarlık yoksa, içerik kenarınızı doğrudan etkiler, bu da üçüncü örneğinizle sonuçlanır.

Bu sınır yarıçapımız / dairemiz için ne anlama geliyor?

Bu, CSS kurallarınızın yalnızca kenarlıktan oluşan bir kutu ile sonuçlandığı anlamına gelir. Kurallarınız, bu kenarlığın her iki tarafta maksimum 180 piksel genişliğinde olması gerektiğini, diğer yandan aynı boyutta maksimum yarıçapa sahip olması gerektiğini belirtiyor:

Resimde, öğenizin gerçek içeriği (küçük siyah nokta) gerçekten mevcut değil. Eğer hiç uygulamadıysanız border-radiusyeşil kutu ile sonuçlanırsınız. border-radiusSana mavi daireyi verir.

Sadece border-radius iki köşeye uygularsanız anlaşılması kolaylaşır :

#silly-circle{
    width:0; height:0;
    border: 180px solid red;
    border-top-left-radius: 180px;
    border-top-right-radius: 180px;
}

Örneğinizde tüm köşeler / kenarlıklar için boyut ve yarıçap eşit olduğundan bir daire elde edersiniz.

Diğer kaynaklar

Referanslar

• W3C: CSS Arka Plan ve Kenarlık Modülü Seviye 3 (özellikle 5. Yuvarlak Köşeler )

Gösteriler

• Lütfen aşağıdaki demoyu açın, bu border-radiusda kenarlığın nasıl etkilendiğini gösterir (içerik kutusu olarak iç mavi kutuyu, dolgu sınırı olarak iç siyah sınırı, dolgu olarak boş alanı ve dev kırmızı kenarlığı, sınırı). İç kutu ile kırmızı kenarlık arasındaki kesişimler genellikle içerik kenarını etkiler.

var all = $('#TopLeft, #TopRight, #BottomRight, #BottomLeft');

all.on('change keyup', function() {
  $('#box').css('border' + this.id + 'Radius', (this.value || 0) + "%");
  $('#' + this.id + 'Text').val(this.value + "%");
});

$('#total').on('change keyup', function() {
  $('#box').css('borderRadius', (this.value || 0) + "%");
  $('#' + this.id + 'Text').val(this.value + "%");
  all.val(this.value);
  all.each(function(){$('#' + this.id + 'Text').val(this.value + "%");})
});

#box {
  margin:auto;
  width: 32px;
  height: 32px;
  border: 100px solid red;
  padding: 32px;
  transition: border-radius 1s ease;
  -moz-transition: border-radius 1s ease;
  -webkit-transition: border-radius 1s ease;
  -o-transition: border-radius 1s ease;
  -ms-transition: border-radius 1s ease;
}
#chooser{margin:auto;}
#innerBox {
  width: 100%;
  height: 100%;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <div id="innerBox"></div>
</div>
<table id="chooser">    
  <tr>
    <td><label for="total">Total</label></td>
    <td><input id="total" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="totalText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="TopLeft">Top-Left</label></td>
    <td><input id="TopLeft" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="TopLeftText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="TopRight">Top right</label></td>
    <td><input id="TopRight" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="TopRightText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="BottomRight">Bottom right</label></td>
    <td><input id="BottomRight" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="BottomRightText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="BottomLeft">Bottom left</label></td>
    <td><input id="BottomLeft" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="BottomLeftText" value="0" type="text" /></td>
  </tr>
  <caption><code>border-radius</code> values. All values are in percent.</caption>
</table>
<p>This demo uses a box with a <code>width/height</code> of 32px, a <code>padding</code> of 32px, and a <code>border</code> of 100px.</p>

gösteri

Bu resim gösterimi ile soruyu başka bir şekilde inceleyelim:

Önce sınır yarıçapının nasıl üretildiğini görelim mi?

Yarıçap üretmek için sınırının iki tarafını alır. Kenarlık yarıçapını 50 piksele ayarlarsanız, bir taraftan 25 piksel ve başka bir taraftan 25 piksel gerekir.

Ve her iki taraftan da 25 piksel alarak şu şekilde üretilir:

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 50px 0 0;
}

Şimdi bir köşeye uygulamak için en fazla karenin ne kadar sürebileceğini görün.

Yukarıdan 180 piksele, sağdan 180 piksele kadar sürebilir. Sonra şöyle üretilir:

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 0 0;
}

Ve buna bakın, eşit olmayan bir yarıçap değeri ayarlarsak nasıl üretir?

Sınır yarıçapını yalnızca iki köşeye eşit olmayan bir şekilde uygularsanız:

• sağ üst köşeden 180 piksele

• sağ alt köşeden 100 piksele

Sonra alacaktı

• sağ üst: üstten 90 piksel ve sağdan 90 piksel

• sağ alt: sağdan 50 piksel ve alttan 50 piksel

Sonra böyle üretecekti

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 100px 0;
}

Her kenarına uygulamak için sınırının en fazla ne kadarı kare alabilir? Ve nasıl bir çember oluşturduğunu görüyor musunuz?

Sınır boyutunun yarısına kadar, yani 180 piksel / 2 = 90 piksel sürebilir. Sonra böyle bir daire üretirdi

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 180px;
}

Neden her tarafa uygulamak için karenin sadece yarısını alıyor?

Çünkü tüm köşeler yarıçap değerlerini eşit olarak ayarlamak zorundadır.

Sınırının eşit parçalarını alarak bir daire oluşturur.

Kenarlıklar, herhangi bir içeriğin dış kutusudur ve üzerine yarıçap uygularsanız, basitçe dairesel kenar üretecektir.

Ben başlangıçta dikdörtgen oluşturmak height and width = 180pxve daha sonra 30pxher köşe gibi verilen yarıçapı ile eğri yapmak düşünüyorum . Böylece borderverilen ile ayarlanır radius.

Her ikisi de .ave .baynı çıktıyı verecektir.

S. Neden kullandım width: 360px; height: 360px;?

A. border: 180px solid red;gibi .aişlerde border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */.

Umarım bu keman kavramı anlamanıza yardımcı olur.

.a{
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}
.b{
    background:red;
    width: 360px;
    height: 360px;
    border-radius: 180px;
}