Heim >Web-Frontend >HTML-Tutorial >Einführung und Anwendungsfähigkeiten von CSS3 mit abgerundeten Ecken
Einführung und Anwendungsfähigkeiten von CSS3 mit abgerundeten Ecken
- PHP中文网Original
- 2016-11-30 23:59:391526Durchsuche
*Die folgenden Techniken sind alle von „CSS Secrets“ abgeleitet, geschrieben von Lea Verou
Adaptive Ellipsen- und Verrundungskonstruktion
Um einen Kreis in CSS zu konstruieren, müssen Sie nur den Rand hinzufügen -radius-Attribut Setzen Sie den Wert einfach auf die halbe Seitenlänge.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>border-radiustitle>
<style>
.borderRadius{
display: inline-block;
background: #fb3;
min-width: 200px;
height: 200px;
line-height: 200px;
border-radius: 100px;
/* 边长的一半 */box-sizing: border-box;
padding:0 5px;
}<style>
<head>
<body>
<p class="borderRadius">
<p class="innerTxt">p>p>body>html>
Der Anzeigeeffekt ist wie folgt:
Das obige Layout, wenn wir auch hinzufügen viel im innerTxt-Inhalt erhalten Sie den folgenden Effekt:
Wenn wir eine adaptive Ellipse wollen, sollte der Randradius kein fester Wert sein. Radius auf 50 %, der Anzeigeeffekt ist wie folgt:
Dies wird zu einer adaptiven Ellipse.
Hier geben wir eine umfassende Einführung in die Eigenschaften von Randradius. Randradius ist eine abgekürzte Eigenschaft und seine Erweiterungsformel lautet Rand-Oben-Links-Radius, Rand-Oben-Rechts-Radius, Rand -bottom-right-radius, border-bottom-left-radius.
Es gibt auch eine wenig bekannte Funktion: border-radius can Specify horizontale und vertikale Radien unabhängig voneinander, indem Sie die beiden Werte durch einen Schrägstrich ( / ) trennen (horizontale und vertikale Radien von Kreisrundungen sind gleich und können kombiniert werden).
In Kombination dieser Merkmale sollte die detaillierte Erweiterung von border-radius:50% sein: border-radius:50% 50% 50% 50%/50% 50% 50% 50%.
Als nächstes nutzen wir unsere Fantasie, um verschiedene Formen basierend auf den bekannten Fileteigenschaften zu konstruieren.
Randradius: 50 % / 100 % 100 % 0 0 (wenn der Eckenradius weniger als 4 beträgt, wiederholt CSS ihn automatisch für Sie)
Randradius: 100 % 0 0 100 % / 50 %;
Nutzen Sie bei der tatsächlichen Anwendung die Eigenschaften der abgerundeten Ecken voll aus. Mit etwas Fantasie können Sie einen süßen Bonbonknopf-Effekt erzeugen.
.borderRadius{display: inline-block;background: rgba(255,160,220,.8);
box-shadow: hsl(0, 0%, 60%) 0 3px 3px;min-width: 200px;height: 100px;line-height: 200px;
border-radius: 50% 10% / 100% 10%;
}
.borderRadius{display: inline-block;background: rgba(157, 255, 127, 0.8);
box-shadow: hsl(0, 0%, 60%) 0 3px 3px;min-width: 160px;height: 100px;
line-height: 200px;border-radius: 20% 20% 12% 12%/ 80% 80% 12% 12%;
}
Das Obige ist die Einführung und die Anwendungsfähigkeiten von CSS3 mit abgerundeten Ecken. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)! 