Maison > Article > interface Web > Créez des images arrondies et des images ovales avec CSS3

Créez des images arrondies et des images ovales avec CSS3

不言original: 2018-06-05 14:21:332791parcourir

Cet article vous apprend principalement le code d'implémentation spécifique pour créer des images arrondies et des images elliptiques avec CSS3. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article sont partagés avec vous. La méthode de création d'images arrondies et ovales avec CSS3 est pour votre référence. Le contenu spécifique est le suivant

1 Images arrondies

Code XML/HTML. Copier le contenu dans le presse-papiers

<!DOCTYPE html>
<html>
<head>
<style>
img {   
    border-radius: 8px;   
}   
</style>
</head>
<body>
<h2>圆角图片</h2>
<p>使用 border-radius 属性来创建圆角图片:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>

Image ovale

Code XML/HTMLCopier le contenu dans le presse-papiers

<!DOCTYPE html>
<html>
<head>
<style>
img {   
    border-radius: 50%;   
}   
</style>
</head>
<body>
<h2>椭圆形图片</h2>
<p>使用 border-radius 属性来创建椭圆形图片：</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>

Recommandations associées :

Utilisation de CSS pur pour obtenir des exemples d'effets de texte dynamiques

Méthode de définition de la couleur de la police de texte CSS (couleur CSS)

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：Méthode de définition de la couleur de la police du texte CSS (couleur CSS)Article suivant：Méthode de définition de la couleur de la police du texte CSS (couleur CSS)

Articles Liés

Voir plus