web-dev-qa-db-fra.com

Comment ce CSS produit-il un cercle?

C'est le CSS:

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

Comment cela produit-il le cercle ci-dessous?

Enter image description here

Supposons que si un rectangle a une largeur de 180 pixels et une hauteur de 180 pixels, il se présentera ainsi:

Enter image description here

Après application de border-radius 30 pixels, cela ressemble à ceci:

Enter image description here

Le rectangle devient plus petit, c'est-à-dire qu'il va presque disparaître si la taille du rayon augmente.

Alors, comment une bordure de 180 pixels avec height/width-> 0px devenir un cercle avec un rayon de 180 pixels?

htmlcsscss-shapes
205
Navin Rauniyar

Comment une bordure de 180 pixels de hauteur/largeur -> 0px devient-elle un cercle de rayon de 180 pixels?

Reformulons cela en deux questions:

Où width et height s'appliquent-ils réellement?

Jetons un coup d'œil sur les zones d'une boîte typique ( source ):

W3C: Areas of a typical box

Les height et width s'appliquent uniquement au contenu, si le modèle de boîte correct est utilisé (pas de mode quirks, pas d'ancien Internet Explorer).

Où est-ce que border-radius appliquer?

Le border-radius s'applique sur le bord de la bordure. S'il n'y a ni remplissage ni bordure, cela affectera directement votre contenu Edge, ce qui donnera lieu à votre troisième exemple.

Qu'est-ce que cela signifie pour notre frontière rayon/cercle?

Cela signifie que vos règles CSS génèrent une zone composée uniquement d'une bordure. Vos règles stipulent que cette bordure doit avoir une largeur maximale de 180 pixels de chaque côté, tandis que d'un autre côté, elle doit avoir un rayon maximal de la même taille:

Example image

Dans l'image, le contenu réel de votre élément (le petit point noir) est vraiment inexistant. Si vous n'avez pas appliqué de border-radius vous vous retrouveriez avec la boîte verte. Le border-radius vous donne le cercle bleu.

Il est plus facile de comprendre si vous appliquez le border-radiusseulement aux deux coins :

#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

Comme dans votre exemple, la taille et le rayon de tous les coins/bordures sont égaux, vous obtenez un cercle.

Ressources supplémentaires

Les références

Démonstrations

  • Veuillez ouvrir la démo ci-dessous, qui montre comment le border-radius affecte la bordure (pensez à la zone bleue intérieure en tant que zone de contenu, la bordure noire intérieure en tant que bordure de remplissage, l’espace vide en tant que remplissage et la bordure rouge géante en tant que bordure). Les intersections entre la boîte intérieure et la bordure rouge affectent généralement le contenu Edge.
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>
371
Zeta

démo

Examinons la question d'une autre manière avec cette démonstration d'images:

Voyons d'abord comment le rayon de bordure est produit?

Pour produire un rayon, il faut deux côtés de sa frontière. Si vous définissez border-radius sur 50 pixels, il faudrait 25 pixels d'un côté et 25 pixels d'un autre côté.

Enter image description here

Et en prenant 25 pixels de chaque côté cela produirait comme ceci:

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

Enter image description here

Maintenant, voyez combien cela peut prendre maximum de carré pour appliquer sur un coin?

Il peut prendre jusqu'à 180 pixels du haut et 180 pixels du côté droit. Alors cela produirait comme ceci:

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

Enter image description here

Et voyez ceci, comment cela produit-il si nous définissons une valeur de rayon non égale?

Supposons que si vous appliquez un rayon de bordure uniquement à deux angles de manière inégale:

  • coin supérieur droit à 180 pixels

  • coin inférieur droit à 100 pixels

Ensuite, il faudrait

  • en haut à droite: 90 pixels du haut et 90 pixels de la droite

  • en bas à droite: 50 pixels de droite et 50 pixels du bas

Alors ça produirait comme ça

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

Enter image description here

Combien de maximum de sa bordure peut-il prendre de carré pour s’appliquer de tous les côtés? Et voyez comment cela produit-il un cercle?

Cela peut prendre jusqu'à la moitié de la taille de la bordure, soit 180 pixels/2 = 90 pixels. Ensuite, il produirait un cercle comme celui-ci

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

Enter image description here

Pourquoi faut-il seulement la moitié du carré pour s'appliquer de tous les côtés?

Parce que tous les coins doivent définir leur rayon de manière égale.

Prenant des parties égales de sa frontière, il produit un cercle.

92
Bhojendra Rauniyar

Je pense qu’il crée initialement un rectangle avec height and width = 180px puis créer une courbe de rayon donné comme 30px à chaque coin. Donc, il définit border avec radius.

3
SanketS

Les bordures sont la boîte extérieure de tout contenu et si vous y appliquez un rayon, cela produira simplement le bord circulaire.

3
rahul_pratap

Tous les deux .a et .b donnera la même sortie.

Q. Pourquoi ai-je utilisé width: 360px; height: 360px;?

UNE. border: 180px solid red; dans .a fonctionne comme border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */.

Espoir ce violon vous aide à comprendre le concept.

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