丸みを帯びた Div の周囲にテキストが流れるようにするにはどうすればよいですか?

丸みを帯びた Div 内でのテキスト配置の強化

テキストをシームレスに収容できる丸みを帯びた Div の作成は、CSS テクニックを使用して実現できます。ただし、デフォルトでは、丸められた div はテキストを四角形の形式で表示することがよくあります。

現在の状況:

提供されている JSFiddle (http://jsfiddle.net) で示されているように/kUJq8/)、次の CSS は四角形の丸い div を生成します。 text:

div {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: #333;
    color: #FFF;
}

解決策 1: Shape-Outside

最新のブラウザは、Shape-Outside プロパティをサポートしており、複雑な図形の周囲にテキストを折り返すための直接的なソリューションを提供します。円形の形状の場合、構文は次のようになります。

div {
    width: 320px;
    height: 320px;
    shape-outside: circle(50%);
    background: #333;
    color: #FFF;
}

注: ブラウザーによるシェイプアウトサイドのサポートを考慮する必要があります。

解決策 2: 擬似要素のグラデーション

代替方法には、画像を使用するか、グラデーションを使用して円形を定義します。後者のアプローチでは、次の 4 つの疑似要素が使用されます。

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

div[class]:before {
  /* ... */
}

div[class][id]:before {
  /* ... */
}

div[class]:after {
  /* ... */
}

div[class][id]:after {
  /* ... */
}

慎重に配置された放射状のグラデーションを使用することで、これらの疑似要素は円形の錯覚を効果的に作成します。メイン div の丸い角と組み合わせると、テキストは必要に応じて円の周囲を包み込みます。

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