Como arredondar arestas e criar várias colunas com CSS3

Em vez de ter que usar até quatro imagens separadas para dar a ilusão de uma forma curva em seu site, com CSS3, agora você pode criar recipientes com cantos curvados! Aqui está o código, que tem a declaração CSS3 totalmente suportado no topo seguido por duplicatas prefixadas para outros navegadores:

#box {border-radius: 20px; / * para o Mozilla Firefox * / - moz-border-radius: 20px; / * para o Safari Google Chrome * / - webkit-border-radius: 20px;}

Você pode usar o border-radius estilo em qualquer objeto, incluindo imagens retangulares. Quanto maior o número de pixels, o mais redondo na borda.

Antes de CSS3, se você queria ter várias colunas em sua página você precisa se quer flutuar elementos dentro de recipientes ou posicioná-los absolutamente relativa a um contêiner pai. Agora, com CSS3, você pode facilmente criar várias colunas dentro de um único recipiente utilizando a propriedade de coluna, definindo os valores para o número de coluna e fosso de largura, com ou sem uma regra vertical entre eles.

# Box1 {/ * para navegadores que não requerem um prefixo * / column-count: 4-column-gap: 30px; coluna da regra: 3px #fff sólida - / * para o Mozilla Firefox * / - moz-column-count: 4- -moz-column-gap: 30px;-column-regra -moz: #fff sólida 3px - / * para o Safari Google Chrome * / - webkit-column-count: 4 - webkit-column-gap: 30px; -webkit-column-regra: sólida 3px fff- #}

A ilustração mostra uma comparação de uma camada usando o estilo de várias colunas e outro layout sem colunas. Para mais informações sobre como você pode controlar ainda mais a aparência de suas várias colunas, consulte quirksmode.