Heim > Artikel > Web-Frontend > So legen Sie abgerundete Ecken für Bilder in CSS fest
So legen Sie abgerundete Ecken für Bilder in CSS fest
- 醉折花枝作酒筹Original
- 2021-07-26 11:10:2517647Durchsuche
In CSS können Sie das Attribut „border-radius“ verwenden, um abgerundete Ecken für Bilder festzulegen. Sie müssen nur den Stil „border-radius: value;“ festlegen. Durch die Angabe eines Werts für diese Eigenschaft werden die Radien aller vier Ecken gleichzeitig festgelegt. Alle zulässigen CSS-Maße können verwendet werden.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Für abgerundete CSS3-Ecken muss nur eine Eigenschaft festgelegt werden: border-radius (bedeutet „Randradius“). Sie geben einen Wert für diese Eigenschaft an, um die Radien aller vier Ecken gleichzeitig festzulegen. Alle zulässigen CSS-Maße können verwendet werden: em, ex, pt, px, Prozentsatz usw.
Beispiel:
<!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>Originalbild:
Der Effekt nach dem Festlegen des Hintergrunds:
Empfohlenes Lernen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo legen Sie abgerundete Ecken für Bilder in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!