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


206

Este es el CSS:

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

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

Ingrese la descripción de la imagen aquí

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

Ingrese la descripción de la imagen aquí

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

Ingrese la descripción de la imagen aquí

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

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


14
Es un objeto 0x0 con un borde de 180 píxeles alrededor que tiene esquinas redondeadas. Entonces las esquinas redondeadas son cuadrantes de un círculo.
Kaz

Tengo una pregunta tonta en mi mente, ¿por qué quieres hacer circlecon borde? podemos hacer fácilmente circlecon widthy heightpor qué lo hacemos conborder
The Mechanic

77
Para su información, para hacer círculos, use <code> border-radius: 50% </code>: hace que sea más fácil ajustar solo el ancho / alto al obtener el diseño correcto.
David Gilbertson el

Sí señoritas, es una matemática
Medet Tleukabiluly

Respuestas:


372

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

Reformulemos eso en dos preguntas:

¿Dónde aplicar widthy en heightrealidad aplicar?

Echemos un vistazo a las áreas de un cuadro típico ( fuente ):

W3C: áreas de una caja típica

El heighty widthse aplican sólo en el contenido, si el modelo de caja correcta está siendo utilizado (sin modo de peculiaridades, sin antigua de Internet Explorer).

¿Dónde se border-radiusaplica?

El se border-radiusaplica en el borde del borde. Si no hay relleno ni borde, afectará directamente su borde de contenido, lo que resulta en su tercer ejemplo.

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

Esto significa que sus reglas CSS dan como resultado un cuadro que solo consta de 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:

Imagen de ejemplo

En la imagen, el contenido real de su elemento (el pequeño punto negro) es realmente inexistente. Si no aplicaste ninguno border-radius, terminarías con el cuadro verde. El border-radiuste da el círculo azul.

Se vuelve más fácil de entender si aplicas el border-radius único a dos esquinas :

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

Borde solo aplicado en dos esquinas

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

Recursos adicionales

Referencias

Manifestaciones

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


No creo que css3-background haga ninguna referencia a css3-box (css3-box está pendiente de una reescritura).
BoltClock

@BoltClock: pensé que css3-box definiría los bordes . Solo hay una referencia a css2.1-box en la introducción (no normativo), y la imagen dada también está allí, por lo que css3-box realmente no es necesario para entender border-radius(qué cambios se esperan en la reescritura de css3- ¿caja?).
Zeta

@ Zeta tengo una pregunta tonta en mi mente, ¿por qué quieres hacer circlecon borde? podemos hacer fácilmente circlecon widthy heightpor qué lo hacemos conborder
The Mechanic

1
@Sarfaraz: Eche un vistazo a la pregunta del OP: "Entonces, ¿cómo un borde de 180 px se height/width-> 0pxconvierte en un círculo con un radio de 180 px?" . Simplemente respondí la pregunta. Hay otras formas de crear un círculo, pero OP solo estaba interesado en cómo funciona este método específico.
Zeta

@Zeta: No estoy seguro de qué se cambiará exactamente, pero dado que WD no se ha actualizado en 6 años, sospecho que sí lo será. Sé que la sección 11 ( overflowfamilia de propiedades) ahora vive en su propio módulo, css-overflow-3, pero eso aún no se ha reflejado en el ED. Verá muchos problemas en el ED, pero imagino que no es una lista exhaustiva: dev.w3.org/csswg/css3-box
BoltClock

94

Manifestación

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 se necesitan dos lados de su borde. Si establece el radio del borde en 50 píxeles, se necesitarían 25 píxeles de un lado y 25 píxeles del otro lado.

Ingrese la descripción de la imagen aquí

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

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

Ingrese la descripción de la imagen aquí

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

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

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

Ingrese la descripción de la imagen aquí

Y mira 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 tomaría

  • arriba a la derecha: 90 píxeles desde la parte superior 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 produciría así

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

Ingrese la descripción de la imagen aquí

¿Cuánto máximo de su borde puede tomar del cuadrado para aplicar en todos los lados? ¿Y ves cómo produce un círculo?

Puede ocupar 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;
}

Ingrese la descripción de la imagen aquí

¿Por qué solo se necesita 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.


77
En realidad, la versión actual de esta respuesta lo lleva un poco demasiado lejos. La pregunta es simplemente "cómo este CSS crea un círculo", no "cómo funciona el radio del borde en general", por lo que, aunque técnicamente correcto, es un poco demasiado. También puede volver a formatear la pregunta y poner el código real en entornos de código.
Zeta

3

Los bordes son el cuadro exterior de cualquier contenido y si aplicas el radio sobre él, simplemente producirá el borde circular.


3

Creo que inicialmente crea un rectángulo con height and width = 180pxy luego hace una curva con un radio dado como 30pxen cada esquina. Entonces se establece bordercon dado radius.


1

Ambos .ay .bdarán el mismo resultado.

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

A. border: 180px solid red;en .aobras como 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;
}

9
¿Eh? "¿Cómo funciona .a?" "Aquí hay una comparación entre .a y .b" No estoy seguro de lo que estás tratando de decir aquí.
BoltClock
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.