Nils Binder hat die Neuigkeiten, wie man Elemente durch die Verwendung von border-radius manipuliert, indem man acht Werte wie folgt an die Eigenschaft übergibt
.element {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}Dies ist eine so coole Technik, dass er sogar eine winzige Web-App namens Fancy-Border-Radius entwickelt hat, um zu sehen, wie diese Werte in der Praxis funktionieren. Sie ermöglicht es Ihnen, die Form nach Belieben zu manipulieren und dann den Code direkt in Ihre Designs zu kopieren und einzufügen.
Cool, oder? Ich denke, diese Technik ist potenziell sehr nützlich, wenn Sie kein SVG benötigen, um Inhalte zu umschließen, da ich in letzter Zeit eine Menge Websites gesehen habe, die "Blobs" als grafische Elemente verwenden, und dies ist sicherlich eine interessante neue Möglichkeit, dies zu tun. Aber es lässt mich auch fragen, wie viele relativ alte und bekannte CSS-Eigenschaften etwas Hinterhältiges haben, das versteckt ist und auf uns wartet.
Wir haben auch ein Tool zum Spielen, das Ihnen helfen könnte, die Möglichkeiten zu verstehen.
Siehe den Pen All the border-radius’ von Chris Coyier (@chriscoyier) auf CodePen.
Ich bin ein absoluter Anfänger, wirklich zum ersten Mal. Ich verstehe die Box-Radius-Eigenschaft, aber wo zum Teufel soll ich sie in style.css einfügen? Mein Ziel ist es, dass alle Inhaltsfelder auf der Blog-Landingpage abgerundete Ecken haben, aber auch wenn ich versuche, dies in alle Elemente einzufügen, die mich an die Box erinnern (Inhaltsbox, Box-Wrapper), bleiben die Ränder gleich, oder die einzige Änderung ist der Button dieser Inhaltsbox mit der Aufschrift "Weiterlesen" ...
Ich weiß, dass es vielleicht eine dumme Frage ist, aber ich finde es nirgends.
Vielen Dank
Hallo Tam, gute Frage! Sie sollten border-radius zu dem Element hinzufügen, das der Container für das ist, was abgerundet wird.
Nehmen wir also an, wir haben ein Element mit dem Klassennamen "box" und darin befindet sich Inhalt.
Dies ist eine Box
Dies ist Inhalt in der Box.
In CSS würden wir das Element
.boxansprechen, da es der Container für den Inhalt ist..box {background-color: red;
border-radius: 20px;
color: white;
padding: 2em;
}
So sieht das aus: https://codepen.io/geoffgraham/pen/PVboLG