Wie lässt sich Text mit CSS um ein abgerundetes Div wickeln?

So halten Sie Text mithilfe von CSS in einem abgerundeten Div

In dieser Frage wollte der Benutzer ein rundes Div mit Text darin haben, wie im bereitgestellten Bild zu sehen ist . Allerdings erschien der Text im runden Div des Benutzers eckig.

Verwendung von CSS

Um mit CSS den gewünschten Effekt zu erzielen, könnte der Benutzer die folgenden Optionen in Betracht ziehen:

1. Verwendung von „Shape-outside“

Diese Eigenschaft ermöglicht die Anpassung des Umbruchs von Inline-Inhalten um eine nicht rechteckige Form. Es handelt sich um eine moderne Lösung mit guter Browserunterstützung, wie in der Dokumentation des Mozilla Developer Network erwähnt.

2. Erstellen einer Form mit Hintergrundverläufen

Für ein kreisförmiges Div können Sie Abschnitte eines radialen Verlaufs erstellen, damit der Text darum herum verläuft. Hier ist ein Beispiel:

div:not([class]) {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

div[class]:before {
  content: '';
  float: left;
  clear: left;
  height: 5em;
  width: 5em;
  background: radial-gradient(circle at bottom right, transparent 69%, red 69%);
}

div[class][id]:before {
  background: radial-gradient(circle at top right, transparent 69%, red 69%);
}

div[class]:after {
  content: '';
  float: right;
  clear: right;
  height: 5em;
  width: 5em;
  background: radial-gradient(circle at bottom left, transparent 69%, red 69%);
}

div[class][id]:after {
  background: radial-gradient(circle at top left, transparent 69%, red 69%);
}

Das obige ist der detaillierte Inhalt vonWie lässt sich Text mit CSS um ein abgerundetes Div wickeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!