Borda arredondada e sombreada
Eu quero fazer uma div que tenha os cantos arredondados e com uma sombra, mas não quero usar tabelas para alocar as imagens, então fiz esse modo:
O CSS:
body {
font: 11px Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #d3e7ff;
background-image: url('images/bg.png');
background-repeat: repeat-x;
}img {
border: none;
}div#bordaA {
background-image: url('images/borda-a.png');
background-repeat: no-repeat;
background-position: top left;
width: 725px;
}div#bordaB {
background-image: url('images/borda-b.png');
background-repeat: no-repeat;
background-position: top right;
width: 724px;
}div#bordaC {
background-image: url('images/borda-c.png');
background-repeat: no-repeat;
background-position: top left;
width: 724px;
}div#bordaD {
background-image: url('images/borda-d.png');
background-repeat: no-repeat;
background-position: top right;
width: 724px;
}div#bordaE {
background-image: url('images/borda-cima.png');
background-repeat: repeat-x;
width: 700px;
margin: 0px 0px -2px 0px
}div#bordaF {
background-image: url('images/borda-baixo.png');
background-repeat: repeat-x;
width: 700px;
margin: 0px 0px 0px 0px
}div#bordaG {
background-image: url('images/borda-esquerda.png');
background-repeat: repeat-y;
background-position: top left;
width: 724px;
}div#bordaH {
background-image: url('images/borda-direita.png');
background-repeat: repeat-y;
background-position: top right;
width: 724px;
}div#conteudo {
background-color: #FFFFFF;
width: 700px;}O HTML:
<div id='bordaA'>
<div id='bordaB'>
<div id='bordaE'>
.
</div>
</div>
</div>
<div id='bordaH'>
<div id='bordaG'>
<div id='conteudo'>
Conteúdo da Página
</div>
</div>
</div>
<div id='bordaC'>
<div id='bordaD'>
<div id='bordaF'>
.
</div>
</div>
</div>
Resultado:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img147.imageshack.us/img147/7079/borda.png&key=c47366c6df2eff3e66ac455d59237b2d7e648c67b6123ff282452a8729250162" alt="Imagem Postada" />
Funcionar funcionou, mas eu acho que fiz uma bela gambiarra, o código ficou bem grande, não tem um outro método melhor para que eu possa fazer isso?
Discussão (5)
Carregando comentários...