Este documento é uma tradução de português (Europeu) do documento Inglês oficial.:
https://www.w3.org/Style/Examples/007/roundshadow.html. Esta tradução foi proporcionada por Elisa Maria e pode conter alguns erros. Para eliminar dúvidas por favor consulte a versão oficial deste documento em Inglês. Versão de Português (Europeu):http://www.internetbootcamp.net/007/roundshadow.html
Cabins For Sale in Pigeon Forge TN Tennessee Cabins For Sale Homes for Sale in Wesley Chapel

Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

(This Page uses CSS style sheets)

Cantos arredondados e sombras em caixas

Cinco imagens

Resultado

Cantos arredondados e sombras em caixas

CSS3 vai ter propriedades para fazer cantos arredondados, fronteiras constituidas por imagens e caixas com sombras, mas com algum trabalho pode simular algumas destas propriedades com o CSS2 - e sem nenhum tabela ou Mar-up extra.

Esta página foi inspirada por uma criada por Arve Bersvendsen. Ele tem muitas mais demostrações interessantes de CSS.

Claro que cantos arredondados e sombras irão ser muito mais simples com CSS3. Por exemplo, para dar a um parágrafo uma fronteira espessa com cantos arredondados, vai precisar apenas de duas linhas de CSS3 como estas:

P { border: solid thick red;
    border-radius: 1em }

E para adiccionar uma sombra borrão em queda metade baixo e à direita do parágrafo, só uma linha é suficiente:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Podes tentar aqui se já funcionar) Mas se quiser utilizar isto tudo já e não te importas com a complexidade e com a falta de flexividade, pode usar a técnica em baixo. No minimo é um bom teste para navegadores com defeitos.....

Cinco imagens em um elemento

O truque principal é usar conteúdo já gerado ('::before' e '::after') para por quatro imagens extras no elemento. O '::before' pseudo-elemento pode ter um fundo e uma imagem plano, e o '::after' pseudo-elemento também. O elemento pode ter um fundo num total de quatro imagens.

Criamos cinco imagens PNG, colocamo-las em quatro cantos. Aqui estão as imagens:

Canto superior esquerdo:
top left corner
Limite e canto superior direito:
top right corner
Parte média e limite direito:
background and right edge
Canto inferior esquerdo:
bottom left corner
Limite inferior e canto direito inferior:
bottom and bottom left corner

Aqui estão as regras CSS para as posicionar:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote::before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(/rs-topleft.png) }
blockquote::after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

Porque a nossa imagem de fundo é 620px largura, não podemos permitir caixas maiores de que 629px, sem ter falhas. Isso é por a propriedade largura máxima está lá. A propriedade 'display:block' é necessária para assegurar que o conteúdo gerado forma as caixas por si próprio em cima e em baixo do conteúdo principal, em vez de ser inserido na primeira e última linha. A 'line-height:0' assegura que não existe espaço aberto à esquerda para subidas e descidas em cima e em baixo das imagens na propriedade 'content'.

O resultado

Aqui está o resultado:

Vê uma caixa de verde pálido com cantos arredondados e uma sombra em queda num fundo branco? Se não, o teu navegador não está a gerar o conteúdo correctamente(ou nem todo o conteúdo).

O código HTML não é mais do que deve ser:

<blockquote>
<p>Vê uma caixa de verde pálido com cantos arredondados
e uma sombra em queda num fundo branco? Se não,
o teu navegador não está a gerar o conteúdo
correctamente(ou nem todo o conteúdo).

</blockquote>

Se quer testar se o seu navegador já suporta o CSS3, pode tentar aqui.

CSS Valid CSS!

Bert Bos
criado em 5 de Maio de 2001;
Última actualização $Data: 2009/02/03 14:39:10 $GMT