Ini adalah CSS:

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

Bagaimana cara menghasilkan lingkaran di bawah ini?

Misalkan, jika lebar persegi panjang adalah 180 piksel dan tinggi adalah 180 piksel maka akan muncul seperti ini:

Setelah menerapkan batas-radius 30 piksel akan muncul seperti ini:

Persegi panjang menjadi lebih kecil, yaitu hampir akan menghilang jika ukuran jari-jari meningkat.

Jadi, bagaimana perbatasan dengan 180 piksel height/width-> 0pxmenjadi lingkaran dengan jari-jari 180 piksel?

Bagaimana perbatasan 180 piksel dengan tinggi / lebar-> 0px menjadi lingkaran dengan jari-jari 180 piksel?

Mari kita rumuskan itu menjadi dua pertanyaan:

Di mana widthdan heightbenar - benar berlaku?

Mari kita lihat area-area dari kotak yang khas ( sumber ):

The heightdan widthberlaku hanya pada konten, jika model kotak yang benar sedang digunakan (tidak ada quirks mode, tidak ada Internet Explorer tua).

Di mana border-radiusberlaku?

Ini border-radiusberlaku di tepi perbatasan. Jika tidak ada bantalan atau pembatas, itu akan secara langsung mempengaruhi tepi konten Anda, yang menghasilkan contoh ketiga Anda.

Apa artinya ini untuk radius-lingkaran / lingkaran kita?

Ini berarti bahwa aturan CSS Anda menghasilkan kotak yang hanya terdiri dari perbatasan. Aturan Anda menyatakan bahwa batas ini harus memiliki lebar maksimum 180 piksel di setiap sisi, sementara di sisi lain batas tersebut harus memiliki jari-jari maksimum dengan ukuran yang sama:

Dalam gambar, konten aktual elemen Anda (titik hitam kecil) benar-benar tidak ada. Jika Anda tidak menerapkannya, border-radiusAnda akan berakhir dengan kotak hijau. The border-radiusmemberi Anda lingkaran biru.

Semakin mudah untuk dipahami jika Anda menerapkan border-radius hanya ke dua sudut :

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

Karena dalam contoh Anda ukuran dan jari-jari untuk semua sudut / batas sama dengan Anda mendapatkan lingkaran.

Sumber lebih lanjut

Referensi

• W3C: CSS Backgrounds and Borders Module Level 3 (esp. 5. Rounded Corners )

Demonstrasi

• Silakan buka demo di bawah ini, yang menunjukkan bagaimana border-radiuspengaruhnya terhadap perbatasan (anggap kotak biru batin sebagai kotak isi, perbatasan hitam dalam sebagai perbatasan padding, ruang kosong sebagai padding dan perbatasan merah raksasa sebagai, yah, berbatasan). Persimpangan antara kotak dalam dan batas merah biasanya akan mempengaruhi tepi konten.

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>

Demo

Mari kita periksa pertanyaannya dengan cara lain dengan demonstrasi gambar ini:

Mari kita lihat dulu bagaimana radius perbatasan dihasilkan?

Untuk menghasilkan radius diperlukan dua sisi perbatasan. Jika Anda mengatur radius batas menjadi 50 piksel maka akan butuh 25 piksel dari satu sisi dan 25 piksel dari sisi lain.

Dan mengambil 25 piksel dari setiap sisi yang akan dihasilkannya seperti ini:

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

Sekarang lihat berapa banyak yang bisa diperlukan untuk menggunakan persegi di satu sudut?

Ini dapat memakan waktu hingga 180 piksel dari atas dan 180 piksel dari kanan. Maka akan menghasilkan seperti ini:

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

Dan lihat ini bagaimana hasilnya jika kita menetapkan nilai radius yang tidak sama?

Misalkan, jika Anda menerapkan radius perbatasan hanya ke dua sudut secara tidak merata:

• sudut kanan atas hingga 180 piksel

• sudut kanan bawah hingga 100 piksel

Maka akan butuh

• kanan atas: 90 piksel dari atas dan 90 piksel dari kanan

• kanan bawah: 50 piksel dari kanan dan 50 piksel dari bawah

Maka akan menghasilkan seperti ini

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

Seberapa jauh batas maksimum yang bisa diambil persegi untuk diterapkan di semua sisi? Dan lihat bagaimana cara menghasilkan lingkaran?

Ini dapat memakan waktu hingga setengah dari ukuran batas, yaitu 180 piksel / 2 = 90 piksel. Maka akan menghasilkan lingkaran seperti ini

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

Mengapa hanya butuh setengah dari lapangan untuk diterapkan di semua sisi?

Karena semua sudut harus menetapkan nilai radius mereka secara merata.

Mengambil bagian yang sama dari perbatasannya, itu menghasilkan lingkaran.

Perbatasan adalah kotak luar dari konten apa pun dan jika Anda menerapkan radius di atasnya, itu hanya akan menghasilkan tepi melingkar.

Saya pikir itu awalnya membuat persegi panjang dengan height and width = 180pxdan kemudian membuat kurva dengan jari-jari yang diberikan seperti 30pxdengan setiap sudut. Jadi set borderdengan diberikan radius.

Keduanya .adan.b akan memberikan hasil yang identik.

Q. Mengapa saya menggunakan width: 360px; height: 360px; ?

A. border: 180px solid red;dalam .akarya-karya sepertiborder-width: 180px 180px 180px 180px; /* Top Right Bottom Left */ .

Semoga biola ini membantu Anda memahami konsepnya.

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