Como arredondar as bordas e criar várias colunas com css3

Video: Arredondamento de bordas com CSS Parte 01.mp4

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:

Video: Como arredondar e sombrear bordas da div usando css?

#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 fronteira-raio estilo em qualquer objeto incluindo imagens retangulares. Quanto maior o número de pixels, a mais redonda a borda.

Video: Tutorial arredondando cantos com css3

Antes CSS3, se você queria ter várias colunas em sua página que você precisa se quer flutuar elementos dentro de recipientes ou posicioná-los absolutamente em relação 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.

# Caixa1 {/ * para navegadores não requerem um prefixo * / coluna de contagem: 4-coluna-lacuna: 30px; coluna-regra: 3px #fff sólido - / * para o Mozilla Firefox * / - Moz-coluna de contagem: 4- -moz-coluna-lacuna: 30px;-coluna-regra -moz: #fff sólido 3px - / * para Safari & Google Chrome * / - webkit-column-count: 4 - webkit-column-gap: 30px; -webkit-column-regra: sólida 3px fff- #}

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

Video: Universidade XTI - CSS - 34 - Bordas Arredondadas e Sombreamento CSS 3