CSS3 abgerundete Ecken

Verwenden Sie CSS3 border-radius-Eigenschaft können Sie ein beliebiges Element zu machen "Ecke".

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser die Eigenschaft Versionsnummer zu unterstützen.

-webkit- oder -moz- vorherigen Zahlen ausgedrückt Unterstützung für die erste Version des Präfix.

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

CSS3 border-radius Eigenschaft

Verwenden Sie CSS3 border-radius-Eigenschaft können Sie ein beliebiges Element zu machen "Ecke".

Die folgenden drei Beispiele:

1. Geben Sie die Hintergrundfarbe des gerundeten Elements:

Filet!

2. Geben Sie die Grenze Element Filet:

Filet!

3. Legen Sie die Hintergrundbildelemente Filet:

Filet!

Code ist wie folgt:

Beispiele

# Rcorners1 {
border-radius: 25px;
background: # 8AC007;
padding: 20px;
Breite: 200px;
Höhe: 150px;
}

# Rcorners2 {
border-radius: 25px;
border: 2px solid # 8AC007;
padding: 20px;
Breite: 200px;
Höhe: 150px;
}

# Rcorners3 {
border-radius: 25px;
background: url (paper.gif);
background-position: links oben;
background-repeat: repeat;
padding: 20px;
Breite: 200px;
Höhe: 150px;
}

Versuchen »

CSS3 border-radius - geben Sie jedes Filet

Wenn Sie nur einen Wert im border-radius-Eigenschaft angeben, dann wird es vier Filets erzeugen.

Aber wenn Sie an den vier Ecken elf angeben möchten, können Sie die folgenden Regeln verwenden:

Vier Werte: obere linke Ecke des ersten Wert und der zweite Wert ist die obere rechte Ecke, die untere rechte Ecke ist der dritte und der vierte ist die linke untere Ecke.
Drei Werte: obere linke Ecke des ersten Wert und der zweite Wert ist die oben rechts und unten links, unten rechts auf dem dritten Wert
Zwei Werte: der erste ist der oben links und unten rechts, und das zweite ist die obere rechte Ecke und der linken unteren Ecke
Ein Wert: die gleichen vier gerundeten Wert

Die folgenden drei Beispiele:

1. Die vier Werte - border-radius: 15px 50px 30px 5px:

2. Die drei Werte - border-radius: 15px 50px 30px:

3. Die beiden Werte - border-radius: 15px 50px:

Im Folgenden ist der Quellcode:

Beispiele

# Rcorners4 {
border-radius: 15px 50px 30px 5px ;
background: # 8AC007;
padding: 20px;
Breite: 200px;
Höhe: 150px;
}

# Rcorners5 {
border-radius: 15px 50px 30px;
background: # 8AC007;
padding: 20px;
Breite: 200px;
Höhe: 150px;
}

# Rcorners6 {
border-radius: 15px 50px;
background: # 8AC007;
padding: 20px;
Breite: 200px;
Höhe: 150px;
}

Versuchen »

Sie können auch eine elliptische Ecke zu erstellen:

Beispiele

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

Versuchen »