Comment faire circuler le texte autour de divisions arrondies ?

Amélioration du placement du texte dans les divs arrondis

La création de divs arrondis qui s'adaptent parfaitement au texte peut être réalisée à l'aide de techniques CSS. Cependant, par défaut, les divs arrondis affichent souvent le texte au format carré.

Situation actuelle :

Comme démontré dans le JSFiddle fourni (http://jsfiddle.net /kUJq8/), le CSS suivant produit un div rond avec du texte au carré :

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

Solution 1 : Shape-Outside

Les navigateurs modernes prennent en charge la forme-outside propriété, offrant une solution directe pour envelopper du texte autour de formes complexes. Pour une forme circulaire, la syntaxe serait :

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

Remarque : La prise en charge par le navigateur de la forme extérieure doit être prise en compte.

Solution 2 : pseudo Dégradés d'éléments

Les méthodes alternatives consistent à utiliser des images ou des dégradés pour définir la forme circulaire. Avec cette dernière approche, quatre pseudo-éléments sont utilisés :

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 {
  /* ... */
}

En utilisant des dégradés radiaux soigneusement positionnés, ces pseudo-éléments créent efficacement l'illusion d'une forme circulaire. Lorsqu'il est combiné avec les coins arrondis du div principal, le texte s'enroule autour du cercle comme vous le souhaitez.

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!