Comment puis-je simuler un rayon de bordure inséré à l'aide de dégradés CSS3 ?

Simulation d'un rayon de bordure incrusté avec des dégradés CSS3

Obtenir un effet de rayon de bordure incrusté uniquement avec CSS3 pose un défi. Cependant, en utilisant les dégradés CSS3, vous pouvez simuler l'effet souhaité.

La solution de dégradé de Lea Verou

Lea Verou a conçu une solution innovante qui utilise quatre dégradés radiaux transparents positionnés en face coins de l'élément.

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

Ces dégradés créent un ensemble de courbes transparentes qui ressemblent à un rayon de bordure encastré. Vous pouvez ajuster les couleurs et les rayons pour créer différents styles.

Prise en charge et secours du navigateur

Cette technique dépend de la prise en charge du RVBA et des dégradés, qui ne sont pas pris en charge dans les versions plus anciennes. navigateurs, en particulier Internet Explorer. Par conséquent, il est crucial d'utiliser cette solution comme une amélioration progressive ou de fournir une solution de secours basée sur des images pour les navigateurs existants.

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!