CSS3 zaokrąglone narożniki

Za pomocą CSS3 właściwość border-radius, można dokonać dowolnego elementu "rogu".

Pomoc Browser

Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji nieruchomości.

-webkit- lub -moz- wcześniejsze dane wyrażone poparcie dla pierwszej wersji prefiksu.

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

CSS3 Własność border-radius

Za pomocą CSS3 właściwość border-radius, można dokonać dowolnego elementu "rogu".

Poniższe trzy przykłady:

1. Określ kolor tła elementu zaokrąglonym:

Filet!

2. Określ elemencie granicy filet:

Filet!

3. Określ filet elementów tła obrazu:

Filet!

Kod jest w następujący sposób:

Przykłady

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

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

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

Spróbuj »

CSS3 border-radius - określić każdy filet

Jeśli podasz tylko jedną wartość we właściwości border-radius, a następnie wygeneruje cztery filety.

Ale jeśli chcesz określić jedenaście w czterech rogach, można stosować następujące zasady:

Cztery wartości: lewym górnym rogu pierwszej wartości, a druga wartość jest w prawym górnym rogu, w dolnym prawym rogu jest trzeci, a czwarty jest w lewym dolnym rogu.
Trzy wartości: lewym górnym rogu pierwszej wartości, a druga wartość jest prawy górny i dolny lewy, dolny prawy róg trzeciej wartości
Dwie wartości: pierwsza to lewy górny i dolny prawy róg, a drugi jest w prawym górnym rogu i lewym dolnym rogu
Wartość: ta sama wartość zaokrąglona cztery

Poniższe trzy przykłady:

1. Cztery wartości - border-radius: 15px 50px 30px 5px:

2. Te trzy wartości - border-radius: 15px 50px 30px:

3. Te dwie wartości - border-radius: 15px 50px:

Poniżej znajduje się kod źródłowy:

Przykłady

# 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;
}

Spróbuj »

Można również tworzyć eliptyczny róg:

Przykłady

#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;
}

Spróbuj »