CSS3 cantos arredondados

Use CSS3 propriedade border-radius, você pode fazer qualquer elemento "esquina".

Suporte a navegadores

Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.

-webkit- ou figuras anteriores -moz- expressou seu apoio à primeira versão do prefixo.

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

CSS3 propriedade border-radius

Use CSS3 propriedade border-radius, você pode fazer qualquer elemento "esquina".

Os três exemplos a seguir:

1. Especifique a cor do elemento arredondado fundo:

Filé!

2. Especifique o elemento fronteira filé:

Filé!

3. especificar os elementos de imagem de fundo filé:

Filé!

Código é a seguinte:

Exemplos

# Rcorners1 {
border-radius: 25px;
background: # 8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

# Rcorners2 {
border-radius: 25px;
border: 2px sólida # 8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

# Rcorners3 {
border-radius: 25px;
background: url (Paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}

tente »

CSS3 border-radius - discriminar cada filete

Se você especificar apenas um valor na propriedade border-radius, então ele vai gerar quatro filetes.

Mas se você quiser especificar onze nos quatro cantos, você pode usar as seguintes regras:

Quatro valores: canto superior esquerdo do primeiro valor eo segundo valor é o canto superior direito, no canto inferior direito é o terceiro, eo quarto é o canto inferior esquerdo.
Três valores: canto superior esquerdo do primeiro valor eo segundo valor é o direito superior e inferior esquerdo, canto inferior direito do terceiro valor
Dois valores: o primeiro é o canto superior esquerdo e canto inferior direito, eo segundo é o canto direito superior e no canto inferior esquerdo
Um valor: os mesmos quatro valor arredondado

Os três exemplos a seguir:

1. Os quatro valores - border-radius: 15px 50px 30px 5px:

2. Os três valores - border-radius: 15px 50px 30px:

3. Os dois valores - border-radius: 15px 50px:

A seguir está o código fonte:

Exemplos

# Rcorners4 {
border-radius: 15px 50px 30px 5px ;
background: # 8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

# Rcorners5 {
border-radius: 15px 50px 30px;
background: # 8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

# Rcorners6 {
border-radius: 15px 50px;
background: # 8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

tente »

Você também pode criar uma zona elíptica:

Exemplos

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

tente »