SORU
24 NİSAN 2013, ÇARŞAMBA

Nasıl bu CSS bir daire oluşturmak mı?

Bu CSS:

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

Nasıl çember altında üretir mi?

Enter image description here

Dikdörtgen 180 piksel genişliği ve yüksekliği 180 piksel ise varsayalım, o zaman bu gibi görünüyor:

Enter image description here

Border-radius uygulandıktan sonra 30 böyle görünür piksel:

Enter image description here

Dikdörtgen küçük, yani neredeyse eğer yarıçap boyutu artarsa yok olacak hale geliyor.

Nasıl height/width-> 0px 180 piksel sınır 180 piksel çapında bir daire haline gelir?

CEVAP
24 NİSAN 2013, ÇARŞAMBA

Nasıl boy 180 piksel genişliği -^/yapıyor . 0px 180 piksel yarıçapı olan bir daire olur?

Hadi iki soru içine yeniden formüle:

Nerede width height aslında geçerli mi?

Hadi tipik bir kutu (source) alanlarına bir göz atalım:

W3C: Areas of a typical box

height width eğer doğru kutu modeli kullanılıyorsa (tuhaf mod, eski Internet Explorer) sadece içerik üzerinde uygulayın.

Nerede border-radius geçerli mi?

border-radius sınır-kenar geçerlidir. Eğer ne dolgu ne de sınır varsa doğrudan üçüncü örnek sonucu içerik edge, etkileyecektir.

Bu border-radius/Daire bizim için ne anlama geliyor?

Bu CSS kuralları sadece bir sınır içeren bir kutu içinde sonuç anlamına gelir. Kurallarınızı öte yandan aynı boyutta maksimum yarıçapı sahip olması gerekirken, bu sınırın her tarafta 180 piksel maksimum genişliğe sahip olması gereken devlet,:

Example image

Resimdegerçek içeriğisenin elemanın (küçük siyah nokta) gerçekten var olmayan. Eğer border-radius herhangi bir geçerli sormaman mi yeşil kutu ile sona erecekti. border-radius mavi Daire verir.

Daha kolayborder-radius only to two cornerseğer uygularsanız anlamak için alır:

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

Border only applied on two corners

Örnek büyüklüğü ve yarıçapı tüm köşeler için yana/sınırları bir daire almak eşittir.

Başka kaynaklar

Referanslar

Gösteriler

  • Lütfen aç demo aşağıda, hangi gösterir border-radius etkiler sınırı (sanırım iç mavi kutu içeriği kutusu, iç siyah sınır olarak doldurma sınır, boş olarak dolgu ve kocaman kırmızı bir sınır olarak sınır). İç kutu ve kırmızı sınırı arasında kavşak genellikle içerik kenarına etkileyecek. 

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>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
HtmlCss

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • NCIX Tech Tips

    NCIX Tech Ti

    2 Ocak 2007
  • SDSARG3

    SDSARG3

    14 Mart 2009
  • WK

    WK

    9 Ocak 2006

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR