Comment obtenir des coins arrondis d'images en CSS-tutoriel CSS-php.cn

Comment obtenir des coins arrondis d'images en CSS

藏色散人

Libérer： 2023-01-04 09:37:37

original

6680 Les gens l'ont consulté

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.

Comment obtenir des coins arrondis d'images en CSS

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>

Copier après la connexion

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>

Copier après la connexion

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!