Wie kann man mithilfe von CSS Text um ein abgerundetes Div wickeln?

So halten Sie Text mithilfe von CSS in abgerundeten Divs

Das Umschließen von Text um ein rundes Div kann schwierig sein und führt oft zu eckigem Text . Dieses Problem kann mit verschiedenen Techniken gelöst werden:

Shape-Outside-Eigenschaft

Shape-outside ist eine moderne CSS-Eigenschaft, die eine Form definiert, um die Inline-Inhalte umbrochen werden. Durch Anpassen dieser Form können Sie abgerundete Kanten für Ihren Text erstellen. Allerdings ist die Browserunterstützung für „Shape-outside“ begrenzt.

Hintergrundverlauf

Ein anderer Ansatz besteht darin, einen Hintergrund mit radialem Verlauf zu verwenden, um eine kreisförmige Form zu erstellen. Um dies zu erreichen, wenden Sie einen radialen Farbverlauf mit Transparenz außerhalb des gewünschten Kreises an, sodass der Text darin frei fließen kann. Diese Technik erfordert vier Pseudoelemente, um die Form zu bilden.

Pseudoelementlösung

Ähnlich wie die Hintergrundgradientenmethode verwendet diese Technik Pseudoelemente, um eine zu erstellen Kreis mit radialen Farbverläufen. Anstatt jedoch Transparenz zu verwenden, werden die Farbverläufe außerhalb des Kreisumfangs gezeichnet, wodurch der Text effektiv von den Rändern weggedrückt wird.

Implementierung

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

/* ... Remaining pseudo-element styles and additional styling */

Hinweis: Browserunterstützung für Shape-Outside ist für die Verwendung dieser Technik unerlässlich.

Das obige ist der detaillierte Inhalt vonWie kann man mithilfe von CSS Text um ein abgerundetes Div wickeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!