Opa!Chegamos a parte divertida!Vamos começar realmente a brincadeira!Antes de começar com o que provavelmente você mais colocara em seu blog depois da propriedade background veja as seguintes postagens de CSS falando sobre:
Agora vamos falar como é a estrutura da propriedade border que logicamente,da borda ao objeto escolhido ele tem possibilidades parecida com o Padding e Margin olhe suas possibilidades:
- Border
- Border-top
- Border-left
- Border-right
- Border-bottom
- Border-color
- Border-style
- Border-width
Em azul está as possibilidades e em vermelho as "propriedades estruturais".Que no CSS podemos tornar isso muito menor pois a sintaxe mais comum é essa:
Border: 2px solid blue;
Em azul o modo que escolhi de amarelo o "Border-width", de vermelho o "Border-style" de azul esverdeado ou verde, como preferir está o "Border-Color" agora, irei explicar qual a função de cada atributo de bordas:
Border-width:
Define o tamanho da borda ou seja se ela é fina grossa ou media.
Border-Style:
Define o estilo da borda que são vários, citarei eles agora (Se lembrar de mente todas é um tanto dificil então procure na web clique aqui para ir ao site) :
É como se fosse um pontilhado, olhe o exemplo:
<html>
<head>
<style type="text/css">
#d1{
border-width; 12px;
Border-Color: blue;
border-style: dotted;
}
</style>
</head>
<body>
<span id="d1">
Exemplo
</span>
</body>
</html>
Dashed:
É um tipo de pontilhado só que não sao pontos,são linhas!
Exemplo
<html>
<head>
<style type="text/css">
#d1{
border-width; 12px;
Border-Color: blue;
border-style: dotted;
}
</style>
</head>
<body>
<span id="d1">
Exemplo
</span>
</body>
</html>
Solid:
É a mais usada!Ela faz uma borda totalmente solida sem nenhum efeito(originalmente sem efeitos mas você pode colocar) olhe:
Exemplo
<html>
<head>
<style type="text/css">
#d3{
border-width; 12px;
Border-Color: blue;
border-style: solid;
}
</style>
</head>
<body>
<span id="d3">
Exemplo
</span>
</body>
</html>
Double:
Faz uma borda dupla que é muito útil para muitas pessoas :Exemplo
<html>
<head>
<style type="text/css">
#d4{
border-width; 12px;
Border-Color: blue;
border-style: double;
}
</style>
</head>
<body>
<span id="d4">
Exemplo
</span>
</body>
</html>
Groove:
É uma borda com duas partes, não falarei muito sobre.Exemplo
<html>
<head>
<style type="text/css">
#d5{
border-width; 990px;
Border-Color: blue;
border-style: groove;
}
</style>
</head>
<body>
<span id="d5">
Exemplo
</span>
</body>
</html>
Ridge:
É uma borda com um relevo, de certo modo.
<html>
<head>
<style type="text/css">
#d6{
border-width; 990px;
Border-Color: blue;
border-style: ridge;
background: green;
border-bottom-color: yellow;
border-top-color: yellow;
}
</style>
</head>
<body>
<span id="d6">
Exemplo
</span>
</body>
</html>
Inset e Outset:
É uma borda com mudanças nas cores que se encontram na propriedade "top" e "left" no Inset e "right" e "bottom" no Outset .Exemplo
<html><head><style type="text/css">
#d7{border-width; 990px;Border-Color: blue;border-style: inset;background: green;border-left-color: yellow;border-top-color: yellow;}
</style></head><body><span id="d7">Exemplo</span></body></html>
Efeitos com bordas:
Quando postarmos algum efeito sobre postagens colocaremos ele aqui:-nenhum no momento-
Ate a próxima postagem!
Nenhum comentário:
Postar um comentário
Se te ajudou essa postagem, comente!Se você gostou da postagem,Comente!Se encontrou um erro, Comente!Se tem um critica,Comente!Alias não custa nada.