Maison > Article > interface Web > Introduction à la méthode de création d'images arrondies et d'images ovales avec CSS3

Introduction à la méthode de création d'images arrondies et d'images ovales avec CSS3

高洛峰original: 2017-03-07 15:23:072578parcourir

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

<!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"    style="max-width:90%">
</body>
</html>

<.>

Introduction à la méthode de création dimages arrondies et dimages ovales avec CSS3

2. Image ovale

<!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"    style="max-width:90%">
</body>
</html>

Introduction à la méthode de création dimages arrondies et dimages ovales avec CSS3

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'informations sur la façon de créer des images arrondies et des images ovales à l'aide de CSS3, veuillez faire attention au site Web PHP 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：Analyse détaillée du processus de création de vignettes avec CSS3Article suivant：Analyse détaillée du processus de création de vignettes avec CSS3

Articles Liés

Voir plus