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 utiliser la fonction de ligne
Comment acheter et vendre du Bitcoin dans le pays
utilisation de la fonction
Que dois-je faire si le spouleur d'impression ne peut pas démarrer ?
Comment résoudre l'attente d'un appareil
Comment redémarrer régulièrement
Comment utiliser la commande scannow
Combien de temps faut-il pour que la recharge Douyin arrive ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
