Classes de Fronteira
As classes de fronteira W3.CSS pode ser usado em qualquer elemento HTML.
Tenho fronteiras em todos os lados.
Eu tenho uma borda inferior vermelha
I têm bordas arredondadas.
Exemplo
<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>
Tente você mesmo " Exibindo Notes
As notas são frequentemente apresentados com uma cor pálida e uma barra colorida:
Exemplo
<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> Tente você mesmo " Exibindo Painéis
Os painéis podem ser exibidos em um milhão de maneiras diferentes:
Londres é a cidade capital da Inglaterra. É a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 13 milhões de habitantes.
Londres é a cidade capital da Inglaterra. É a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 13 milhões de habitantes.
Londres é a cidade capital da Inglaterra. É a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 13 milhões de habitantes.
Exemplo
<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> Tente você mesmo " Exibindo Quotes
A classe w3-container pode ser usado para exibir citações.
Exemplo
<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> Tente você mesmo " Se você usar HTML <blockquote>, lembre-se que o HTML irá adicionar uma margem extra esquerda:
"Torná-lo o mais simples possível, mas não mais simples."
Albert Einstein
Exemplo
<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> Tente você mesmo " Hoverable Fronteiras
As classes de cor-w3-pairar border- alterar a cor da borda ao passar o mouse:
border hoverable Red
beira roxa que fica azul em foco
Exemplo
<div class="w3-container w3-border w3-hover-border-red">
<p>Red
hoverable border</p>
</div> Tente você mesmo "