Maison > Article > interface Web > Comment définir des coins arrondis pour les images en CSS
Comment définir des coins arrondis pour les images en CSS
- 醉折花枝作酒筹original
- 2021-07-26 11:10:2517585parcourir
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!