div - title html attribute

¿Cómo este CSS produce un círculo?

Question

Este es el CSS:

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

¿Cómo se produce el círculo de abajo?

Supongamos que, si el ancho de un rectángulo es de 180 píxeles y la altura es de 180 píxeles, aparecería así:

Después de aplicar un radio de borde de 30 píxeles, se vería así:

El rectángulo se está reduciendo, es decir, casi desaparecerá si el tamaño del radio aumenta.

Entonces, ¿cómo un borde de 180 píxeles con height/width-> 0px convierte en un círculo con un radio de 180 píxeles?

Answer 1

¿Cómo un borde de 180 píxeles con altura / anchura-> 0px se convierte en un círculo con un radio de 180 píxeles?

Vamos a reformular eso en dos preguntas:

¿Dónde se aplican realmente el width y la height ?

Vamos a echar un vistazo a las áreas de una caja típica ( source ):

La height y el width aplican solo en el contenido, si se está utilizando el modelo de caja correcto (sin modo de peculiaridades, sin el antiguo Internet Explorer).

¿Dónde se aplica el border-radius ?

El border-radius del borde se aplica en el borde del borde. Si no hay relleno ni borde, afectará directamente su borde de contenido, lo que da como resultado su tercer ejemplo.

¿Qué significa esto para nuestro radio de frontera / círculo?

Esto significa que sus reglas de CSS dan como resultado un cuadro que solo consiste en un borde. Sus reglas establecen que este borde debe tener un ancho máximo de 180 píxeles en cada lado, mientras que, por otro lado, debe tener un radio máximo del mismo tamaño:

En la imagen, el contenido real de su elemento (el pequeño punto negro) es realmente inexistente. Si no aplicara ningún border-radius , terminaría con el cuadro verde. El border-radius te da el círculo azul.

Es más fácil de entender si aplica el border-radius solo a dos esquinas :

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

Como en tu ejemplo, el tamaño y el radio de todas las esquinas / bordes son iguales, obtienes un círculo.

Recursos adicionales

Referencias

• W3C: Módulo de Fondos y Bordes CSS Nivel 3 (especialmente source )

Demostraciones

• Abra la demostración a continuación, que muestra cómo el border-radius del borde afecta al borde (piense en el cuadro azul interior como el cuadro de contenido, el borde negro interior como el borde de relleno, el espacio vacío como el relleno y el borde rojo gigante como el , bueno, frontera). Las intersecciones entre el cuadro interno y el borde rojo generalmente afectan el borde del contenido.

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>

Answer 2

Creo que inicialmente crea un rectángulo con height and width = 180px y luego hace una curva con un radio dado como 30px con cada esquina. Así se establece el border con el radius dado.

Answer 3

Los bordes son la caja exterior de cualquier contenido y, si aplica un radio, simplemente producirá el borde circular.

Answer 4

Tanto .a como .b darán el mismo resultado.

P. ¿Por qué usé el width: 360px; height: 360px; width: 360px; height: 360px; ?

A. border: 180px solid red; en .a funciona como border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */ border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */ .

Espero que este violín te ayude a entender el concepto.

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

Answer 5

Demo

Examinemos la pregunta de otra manera con esta demostración de imagen:

Veamos primero cómo se produce el radio del borde?

Para producir el radio toma dos lados de su borde. Si establece el radio de borde en 50 píxeles, tomará 25 píxeles de un lado y 25 píxeles de otro lado.

Y tomando 25 píxeles de cada lado se produciría así:

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

Ahora, ¿cuánto puede tomar el cuadrado máximo para aplicar en una esquina?

Puede tomar hasta 180 píxeles desde arriba y 180 píxeles desde la derecha. Entonces se produciría así:

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

Y vea esto, ¿cómo se produce si establecemos un valor de radio no igual?

Supongamos que, si aplica el radio del borde solo a dos esquinas de manera desigual:

• esquina superior derecha a 180 píxeles

• esquina inferior derecha a 100 píxeles

Entonces tomaria

• arriba a la derecha: 90 píxeles desde arriba y 90 píxeles desde la derecha

• abajo a la derecha: 50 píxeles desde la derecha y 50 píxeles desde la parte inferior

Entonces se produciría así.

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

¿Cuánto máximo de su borde puede tomar de escuadra para aplicarse en todos los lados? ¿Y ver cómo se produce un círculo?

Puede tomar hasta la mitad del tamaño del borde, es decir, 180 píxeles / 2 = 90 píxeles. Entonces produciría un círculo como este.

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

¿Por qué se necesita solo la mitad del cuadrado para aplicar en todos los lados?

Porque todas las esquinas tienen que establecer su valor de radio por igual.

Tomando partes iguales de su borde, produce un círculo.