El radio del borde se usa para hacer que la esquina del borde sea curva. Más el radio, más curvo y redondo será. Estas clases se pueden aplicar a cualquier división, imagen, botones, contenedores, etc.
|
No Señor. |
Clase |
Descripción |
|---|---|---|
|
1. |
w3-redonda-pequeña |
Establece el radio del borde del elemento en 2px. |
|
2. |
ronda w3 |
Establece el radio del borde del elemento en 4px. |
|
3. |
w3-redondo-medio |
Funciona igual que w3-round y establece el radio del borde del elemento en 4px. |
|
4. |
w3-redonda-grande |
Establece el radio del borde del elemento en 8px. |
|
5. |
w3-redonda-xgrande |
Establece el radio del borde del elemento en 16 px. |
|
6. |
w3-redondo-xxlarge |
Establece el radio del borde del elemento en 32 px. |
|
7. |
círculo w3 |
Establece el border-radius al 50%. |
En W3.CSS, las siguientes clases, tal como se usan en el código, se usan para implementar un radio de borde en todas las esquinas de la división.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Title of the page -->
<title>GeeksForGeeks</title>
<!-- Adding W3.CSS file through external link -->
<link rel="stylesheet" href=
"https://www.w3schools.com/w3css/4/w3.css">
<style>
/* CSS Style for Boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 6px;
background-color: #DCDCDC;
}
</style>
</head>
<body>
<!-- w3-container is used to add
16px padding to any HTML element. -->
<!-- w3-center is used to set the
content of the element to the center. -->
<div class="w3-container w3-center">
<!-- w3-text-green sets the text
colour to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
<h2 class="w3-text-green w3-xxlarge">
GeeksForGeeks
</h2>
</div>
<!-- Round Bordered Divisions in W3.CSS -->
<div class="w3-container">
<!-- Round Bordered Divisions -->
<h3 class="w3-text-blue">
Round Bordered Divisions:
</h3>
<!-- Below classes are used to add radius
to the borders -->
<span class="w3-round-small"></span>
<span class="w3-round"></span>
<span class="w3-round-medium"></span>
<span class="w3-round-large"></span>
<span class="w3-round-xlarge"></span>
<span class="w3-round-xxlarge"></span>
<span class="w3-circle"></span>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA