So verwenden Sie CSS3, um den Effekt abgerundeter Ecken zu erzielen (mit Beispielcode)

Um dem Stil der gesamten Seite zu entsprechen, ist es manchmal notwendig, das quadratische Div in verschiedene Formen umzuwandeln, um einen einheitlichen Stil zu erzielen. Dieser Artikel zeigt Ihnen, wie Sie CSS3 verwenden, um den Effekt abgerundeter Ecken zu erzielen hat einen gewissen Referenzwert, Freunde in Not können sich darauf beziehen, ich hoffe, es wird Ihnen hilfreich sein.

Vorteile der Verwendung von CSS3, um den Effekt abgerundeter Ecken zu erzielen

1. Reduzieren Sie den Arbeitsaufwand für die Website-Wartung.

2. Verbessert die Leistung der Website. Ohne HTTP-Anfragen für Bilder wird die Seitenladegeschwindigkeit schneller.

3. Erhöhen Sie die visuelle Schönheit.

Das Prinzip der Verwendung von CSS3 zum Erreichen abgerundeter Ecken

Wir müssen das Attribut „border-radius“ in CSS3 verwenden , dann Heute werden wir Sie mitnehmen, um mehr über das Attribut border-radius zu erfahren.

Randradius-Attribut

1. Bedeutung: Das Abkürzungsattribut des Border-Radius-Attributs fügt dem Element einen abgerundeten Rand hinzu.

2. Syntax: border-radius: 1-4 length|% / 1-4 length|%;

3. Browserkompatibilität: IE9+, Firefox 4+, Chrome, Safari 5+ und Opera unterstützen das Attribut border-radius.

Code zur Verwendung von CSS3, um den Effekt abgerundeter Ecken zu erzielen

Beispiel 1: Elementkreis mit angegebenem Hintergrund Farbe Die Wirkung des Winkels

#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: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

ist in der Abbildung dargestellt

Beispiel 2: Spezifizieren Sie abgerundete Ecken für bestimmte Elemente

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

Der Effekt des Beispiels ist wie in der Abbildung dargestellt

Zusammenfassung

Attribute Der erste Wert der beiden Längen ist der horizontale Radius und der zweite der vertikale Radius. Wenn der zweite Wert weggelassen wird, wird er vom ersten kopiert. Wenn eine der Längen Null ist, sind die Ecken quadratisch und nicht abgerundet. Die Eigenschaft border-radius kann auch Ellipsen erzeugen, die wir Ihnen in einem späteren Artikel vorstellen werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3, um den Effekt abgerundeter Ecken zu erzielen (mit Beispielcode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!