So legen Sie abgerundete Ecken für Bilder in CSS fest-CSS-Tutorial-php.cn

So legen Sie abgerundete Ecken für Bilder in CSS fest

醉折花枝作酒筹

Freigeben： 2023-01-07 11:45:37

Original

17672 Leute haben es durchsucht

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.

So legen Sie abgerundete Ecken für Bilder in CSS fest

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>

Nach dem Login kopieren

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!