CSSを使用して丸いDivの周りにテキストを折り返す方法?

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

この質問では、ユーザーは、提供された画像に見られるように、テキストが入った丸い Div を望んでいました。 。ただし、ユーザーの丸い div 内のテキストは四角く表示されます。

CSS の使用

CSS を使用して目的の効果を実現するには、ユーザーは次のオプションを検討できます:

1. Shape-outside

を利用すると、非長方形の形状の周囲にインライン コンテンツをラッピングするカスタマイズが可能になります。 Mozilla Developer Network のドキュメントで説明されているように、これは優れたブラウザ サポートを備えた最新のソリューションです。

2.背景のグラデーションを使用した図形の作成

円形の div の場合、放射状のグラデーションのセクションを作成して、テキストを回り込ませることができます。以下に例を示します:

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

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