¿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 width
y en height
realidad aplicar?
Echemos un vistazo a las áreas de un cuadro típico ( fuente ):
El height
y width
se 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-radius
aplica?
El se border-radius
aplica 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:
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-radius
te 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;
}
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-radius
afecta 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.
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>