Comment faire en sorte que le texte s'enroule autour d'une division arrondie avec CSS ?

Comment conserver le texte à l'intérieur d'un div arrondi à l'aide de CSS

Dans cette question, l'utilisateur souhaitait avoir un div rond avec du texte à l'intérieur, comme le montre l'image fournie. . Cependant, le texte dans le div rond de l'utilisateur apparaissait carré.

Utilisation de CSS

Pour obtenir l'effet souhaité en utilisant CSS, l'utilisateur pouvait envisager les options suivantes :

1. Utilisation de shape-outside

Cette propriété permet la personnalisation de l'habillage du contenu en ligne autour d'une forme non rectangulaire. C'est une solution moderne avec une bonne prise en charge du navigateur, comme mentionné dans la documentation de Mozilla Developer Network.

2. Création d'une forme avec des dégradés d'arrière-plan

Pour un div circulaire, vous pouvez créer des sections d'un dégradé radial pour que le texte s'enroule autour de lui. Voici un exemple :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!