En CSS, vous pouvez utiliser l'attribut border-radius pour définir des coins arrondis pour les images. Il vous suffit de définir le style "border-radius: value;" sur l'élément image. Fournir une valeur pour cette propriété définit les rayons des quatre coins en même temps. Toutes les mesures CSS légales peuvent être utilisées.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Les coins arrondis CSS3 ne doivent définir qu'une seule propriété : border-radius (qui signifie "rayon de bordure"). Vous fournissez une valeur pour cette propriété afin de définir les rayons des quatre coins en même temps. Toutes les mesures CSS légales peuvent être utilisées : em, ex, pt, px, pourcentage, etc.
Exemple :
<!DOCTYPE html>
<html>
<head>
<base target="_self">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache,must-ridate">
<meta http-equiv="expires" content="0">
<title>设置背景圆角</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />
<style type="text/css">
.normal{
background-image: url(images/rest.png);
width: 215px;
height: 215px;
border-radius: 50%;
background-size: 215px;
background-repeat: no-repeat;
background-position-y: 9%;
}
</style>
</head>
<body>
<!--
原图尺寸是：599*531px的
-->
<div></div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
</body>
</html>Image originale :
L'effet après avoir défini l'arrière-plan :
Apprentissage recommandé : Tutoriel vidéo 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!
Comment créer un lien symbolique
Méthode d'enregistrement du compte Google
paramètres des variables d'environnement Java
Que faire si Chrome ne peut pas charger les plugins
Comment récupérer l'historique du navigateur sur un ordinateur
supprimer le dossier sous Linux
commande utilisateur du commutateur Linux
Classement des dix principaux échanges de devises numériques
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
