Hoje estamos aprendendo a usar a tecnologia CSS3 para obter cantos arredondados sem a necessidade de imagens. Podemos usar CSS3 para obter o efeito de canto arredondado do fundo do título da barra lateral e o efeito de canto arredondado da caixa de pesquisa. Grave-o para uso posterior. O W3C formulou há muito tempo a propriedade CSS3 que implementa cantos arredondados CSS: border-radius Firefox e Safari também implementam esta função através de propriedades privadas:
<div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >Firefox e Safari implementam cantos arredondados< /div>
O efeito é o seguinte:
Entre eles, -moz-border-radius é uma propriedade privada usada pelo Firefox para implementar cantos arredondados, e -webkit-border-radius é uma propriedade privada usada pelos navegadores principais do webkit (como Safari e Chrome) para implementar cantos arredondados. você só precisa especificar que um determinado canto é arredondado. Quanto aos ângulos, todos eles definem quatro atributos:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Claro, o IE (incluindo o IE8) ainda não oferece suporte, então o efeito só pode ser visualizado no Firefox, Safari e Chrome.