Maison > Article > interface Web > Comment obtenir des coins arrondis d'images en CSS

Comment obtenir des coins arrondis d'images en CSS

藏色散人original: 2020-12-18 09:21:276550parcourir

Comment implémenter des coins arrondis dans les images en utilisant CSS : créez d'abord un exemple de fichier HTML ; puis créez un élément div ; et enfin ajoutez des coins arrondis à l'élément via l'attribut "border-radius" de CSS3.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo CSS"

Coins arrondis CSS

css2.1 Ajouter un cercle à Les coins d'un élément sont une chose très gênante. L'ancienne méthode consiste à utiliser des images d'arrière-plan, ce qui est plus difficile à produire. css3, l'attribut border-radius permet de résoudre parfaitement l'attribut coin arrondi.

Syntaxe

border-radius: length value;

Explication :

La valeur de longueur peut être px, pourcentage, em, etc.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圆角实现</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div></div>
    
</body>
</html>

Set border-radius:10px; les quatre rayons de coin définis sont tous de 10px

Comment obtenir des coins arrondis dimages en CSS

La valeur de l'attribut border-radius a quatre façons d'écrire (similaires à margin et padding)

(1) border-radius : une valeur

Le résultat est comme indiqué ci-dessus

(2) border-radius : deux valeurs ; 🎜> Par exemple : border -radius:10px 20px; signifie que le coin supérieur gauche et le coin inférieur droit font 10px, le coin supérieur droit et le coin inférieur gauche font 20px ; >

(3) border- radius : Définissez trois valeurs

Par exemple : border-radius : 10px 20px 30px indiquant que le rayon du coin supérieur gauche, du coin supérieur droit, inférieur ; le coin gauche et le coin inférieur gauche sont 10px, 20px, 30px dans l'ordre

Résultat Comment obtenir des coins arrondis dimages en CSS

(4) border-radius : définir quatre valeurs

Par exemple : border-radius : 10px 20px 30px 40px ; signifie le coin supérieur gauche, Les rayons d'arrondi du coin supérieur droit, du coin inférieur droit et du coin inférieur gauche sont 10px 20px 30px 40px

Le résultat Comment obtenir des coins arrondis dimages en CSS

obtient l'effet suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圆角实现</title>
    <style type="text/css">
        img{
            width: 300px;
            border-radius:80% 90% 100% 20%;
        }
    </style>
</head>
<body>
    <img  src="1.jpg" / alt="Comment obtenir des coins arrondis d'images en CSS" >
    
</body>
</html>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment changer la couleur de la police des liens hypertexte CSSArticle suivant：Comment changer la couleur de la police des liens hypertexte CSS

Articles Liés

Voir plus