Einführung und Anwendungsfähigkeiten von CSS3 mit abgerundeten Ecken-HTML-Tutorial-php.cn

Einführung und Anwendungsfähigkeiten von CSS3 mit abgerundeten Ecken

PHP中文网

Freigeben： 2016-11-30 23:59:39

Original

1566 Leute haben es durchsucht

*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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Ist das nicht ganz süß, also muss man den Künstler nicht belästigen, Bilder zu machen, aber Stellen Sie vor der Anwendung sicher, dass der entsprechende Browser das Attribut „Abgerundete Ecken“ unterstützt.

.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%;
        }

Nach dem Login kopieren

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)!