Wie kann ich Text um ein abgerundetes Div umbrechen lassen?

Verbesserung des abgerundeten Div, um Text aufzunehmen

Viele Projekte erfordern ein abgerundetes Div, um Text nahtlos aufzunehmen. Bei runden Divs erscheint der Text jedoch standardmäßig quadratisch. CSS bietet Lösungen zur Lösung dieses Problems.

Shape-Outside: Ein moderner Ansatz

Die Eigenschaft „Shape-Outside“ ermöglicht das Umschließen von Inline-Inhalten um nicht rechteckige Formen. Es ermöglicht Designern, die Umhüllung anzupassen, auch um komplexe Objekte und Kreise herum. Browserunterstützung für Shape-Outside sollte in Betracht gezogen werden.

Verlaufs- und Pseudoelementtechnik

Eine Kombination aus radialen Verläufen und Pseudoelementen kann einen kreisförmigen Bereich erzeugen das stößt Text ab. Beginnen Sie mit einem quadratischen Kasten und verwenden Sie vier schwebende Pseudoelemente mit radialen Farbverläufen, die außerhalb des Kreismittelpunkts gezeichnet werden. Passen Sie die Farbverläufe an, um die erforderlichen Bereiche abzudecken.

Zum Beispiel erzielt der folgende CSS- und HTML-Code den gewünschten Effekt:

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

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

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

<div>
  <div class="shape"></div>
  <div class="shape">

Das obige ist der detaillierte Inhalt vonWie kann ich Text um ein abgerundetes Div umbrechen lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!