Pouvez-vous créer un rayon de bordure concave avec CSS ?

Explorer les limites du rayon de bordure CSS : obtenir des effets concaves

La flexibilité du rayon de bordure CSS permet la création de différents styles de bordure. Bien que les bordures convexes soient facilement réalisables, la question se pose : un rayon de bordure concave est-il possible ?

Tentatives et limites

Les premières tentatives pour créer un rayon de bordure concave en utilisant des valeurs négatives pour le rayon de bordure se sont avérées infructueux. Cette incapacité découle de la nature des rayons de bordure, qui représentent intrinsèquement une courbe qui s'étend vers l'extérieur à partir du bord.

Illusion basée sur les dégradés

Bien que de véritables bordures arrondies concaves ne soient pas réalisables à l'aide de bordures conventionnelles rayon seul, il est possible de donner l'illusion de concavité grâce à l'utilisation intelligente des dégradés radiaux.

Considérons l'exemple suivant :

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}</code>

Cette technique crée deux dégradés radiaux : un positionné au le bord gauche et l'autre à droite. Les dégradés s'estompent progressivement du transparent à la couleur d'arrière-plan, donnant l'illusion d'une bordure incurvée vers l'intérieur.

Considérations relatives à la compatibilité des navigateurs

Il est important de noter que les dégradés radiaux nécessitent des préfixes de fournisseur pour la compatibilité avec les versions plus anciennes. navigateurs. Les navigateurs Webkit, par exemple, nécessitent les préfixes suivants :

<code class="css">background:
  -webkit-radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
  -webkit-radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);</code>

En combinant des dégradés radiaux avec un positionnement soigné, vous pouvez créer l'impression de rayons de bordure concaves, ajoutant une touche de dimensionnalité à vos conceptions Web.

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!