Comment puis-je créer un rayon de bordure incrusté en utilisant uniquement CSS3 ?-tutoriel CSS-php.cn

Comment puis-je créer un rayon de bordure incrusté en utilisant uniquement CSS3 ?

Patricia Arquette

Libérer： 2024-12-02 21:03:10

original

441 Les gens l'ont consulté

How Can I Create Inset Border-Radius Using Only CSS3?

Incruster le rayon de bordure avec CSS3

En CSS3, obtenir un rayon de bordure incrusté, où les coins sont courbés vers l'intérieur plutôt que vers l'extérieur, peut être un défi sans utiliser d'images. Cependant, il existe une solution intelligente qui utilise les dégradés CSS3.

L'approche ingénieuse de Lea Verou consiste à créer une série de dégradés transparents avec des courbes, créant l'illusion d'un rayon de bordure incrusté. En positionnant ces dégradés avec précision, vous pouvez obtenir l'effet de coins arrondis souhaité.

Son code CSS, comme indiqué ci-dessous, définit une classe personnalisée pour un élément avec le rayon de bordure en médaillon souhaité :

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

Copier après la connexion

L'application de cette classe à un élément entraînera un élément avec un rayon de bordure en médaillon. Il est important de noter que cette technique repose sur la prise en charge du rgba et des dégradés, ce qui en fait une stratégie d'amélioration progressive. Pour les navigateurs plus anciens ou les navigateurs qui ne prennent pas en charge les dégradés, une solution de secours basée sur une image est recommandée pour fournir la prise en charge.

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!