CSSを使用して丸みを帯びたDivの周りにテキストを折り返すにはどうすればよいですか?

CSS を使用して丸い Div 内にテキストを保持する方法

丸い Div の周りでテキストを折り返すのは難しい場合があり、多くの場合、テキストが四角くなります。 。この問題は、さまざまな手法を使用して解決できます。

Shape-Outside プロパティ

Shape-outside は、インライン コンテンツが回り込む形状を定義する最新の CSS プロパティです。この形状を調整することで、テキストのエッジを丸くすることができます。ただし、ブラウザーによるシェイプアウトサイドのサポートは制限されています。

背景のグラデーション

もう 1 つの方法は、放射状のグラデーションの背景を使用して円形の形状を作成することです。これを実現するには、目的の円の外側に透明度のある放射状のグラデーションを適用し、その中でテキストが自由に流れるようにします。この手法では、形状を形成するために 4 つの擬似要素が必要です。

擬似要素ソリューション

背景のグラデーション法と同様に、この手法では擬似要素を利用して形状を作成します。放射状グラデーションを使用した円。ただし、透明度を使用する代わりに、グラデーションは円の周囲の外側に描画され、効果的にテキストを端から遠ざけます。

実装

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

注: この手法を使用するには、ブラウザでのシェイプアウトサイドのサポートが不可欠です。

以上がCSSを使用して丸みを帯びたDivの周りにテキストを折り返すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。