Las clases de frontera
Las clases de frontera W3.CSS se pueden utilizar en cualquier elemento HTML.
Tengo fronteras en todos los lados.
Tengo un borde inferior roja
Tengo bordes redondeados.
Ejemplo
<div class="w3-border">
<p>I have borders on all sides.</p>
</div>
<div class="w3-border-bottom w3-border-red">
<p>I have
a red bottom border.</p>
</div>
<div class="w3-border
w3-round-xlarge">
<p>I have rounded borders.</p>
</div>
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>I have a blue leftbar.</p>
</div>
Inténtalo tú mismo " Viendo Notas
Notas a menudo se muestran con un color pálido y una barra de color:
Ejemplo
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> Inténtalo tú mismo " mostrar paneles
Los paneles se pueden mostrar en un millón de maneras diferentes:
Londres es la capital de Inglaterra. Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes.
Londres es la capital de Inglaterra. Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes.
Londres es la capital de Inglaterra. Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes.
Ejemplo
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div> Inténtalo tú mismo " Viendo Cotizaciones
La clase W3-contenedor se puede utilizar para mostrar citas.
Ejemplo
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it
as simple as possible, but not simpler."</i></p>
<p>Albert
Einstein</p>
</div> Inténtalo tú mismo " Si utiliza HTML <blockquote>, recuerda que el HTML se sumará un margen extra a la izquierda:
"Que sea lo más simple posible, pero no más simple."
Albert Einstein
Ejemplo
<blockquote class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make
it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote> Inténtalo tú mismo " Hoverable Fronteras
Las clases de color w3-activables-frontera- cambian el color de la frontera con el ratón sobre:
hoverable frontera roja
Frontera púrpura que se vuelve azul en vuelo estacionario
Ejemplo
<div class="w3-container w3-border w3-hover-border-red">
<p>Red
hoverable border</p>
</div> Inténtalo tú mismo "