Como fazer um box com sombra e cantos arredondados

Este é o primeiro post sobre CSS. Neste post iremos fazer um box, quadro seja lá como você chama, com bordas arredondadas, com sombra e com a cor interna independente. Como assim independente? É que nas imagens que compõe o nosso box, ela só vai ter a sombra e a borda arredondada.



Se dermos uma ampliada, veremos que as bordas não são suavizadas (anti-aliasing), elas são duras. Isso porque, estamos trabalhando com GIF e não PNG com transparência. Se usássemos a suavização na borda, iríamos ter rastros da cor salva do programa:



Se você tiver algum modo de usar PNG, peço-lhe para que poste aqui a solução.
Mãos à obra: vamos fazer o nosso box com três div’s. O primeiro não irá conter nada. O segundo será o do meio, esse irá conter um parágrafo. O terceiro será o último, e não irá conter nada. As imagens:





O HTLM:

<div id=”topo”></div>
<div id=”meio”>
<p>Lorem ipsum dolor sit amet consectetuer Morbi turpis mattis tincidunt interdum. Curabitur urna eget Donec turpis elit nec Nulla eget nec Nunc. Porttitor ullamcorper orci tellus Curabitur libero vel enim Aliquam condimentum laoreet. Et lobortis id wisi risus purus non eleifend nulla gravida dignissim. Enim Phasellus pede vitae Vestibulum commodo Vestibulum nibh dictum vitae wisi. Pede urna tristique fringilla hendrerit Vestibulum tellus wisi ante.</p>
</div>
<div id=”fim”></div>

e o CSS:

#top{
background: url(topo.gif) #CFF;
height: 14px;
width: 463px;
}
#meio{
background: url(meio.gif) #CFF;
width: 463px;
}
#meio p{
font: 0.8em sans-serif;
margin: 0px;
padding: 15px;
}
#final{
background: url(fim.gif) #CFF;
height: 14px;
width: 463px;
}

E pronto:





Nas cores que estão na propriedade background, será a cor “independente” do nosso box. Outro problema de se usar GIF para essa técnica, é que a cor de trás do box só pode ser da cor em que a sombra é finalizada. Se usar PNG com transparência, isso pode mudar.
Veja também: Caixas com cantos arredondados e sombras(Maujor).
Qualquer coisa, comentem! Até a próxima.