Heim >Web-Frontend >CSS-Tutorial >So fügen Sie einem Bild in CSS zwei Ränder hinzu

So fügen Sie einem Bild in CSS zwei Ränder hinzu

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-07-23 14:11:403226Durchsuche

In CSS können Sie Polsterung verwenden, um einen zweiten Rahmen hinzuzufügen. Sie müssen nur „Rahmen: Rahmengröße Volltonfarbe; Polsterung: Pixelgröße;“ hinzufügen. Sie können sich das img-Tag als einen Container vorstellen, der Bilder enthalten kann, und Sie können den Abstand dafür festlegen.

So fügen Sie einem Bild in CSS zwei Ränder hinzu

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Das Hinzufügen doppelter Ränder zu Bildern wird auch in vielen praktischen Anwendungen verwendet, kommt aber möglicherweise nicht häufig vor. Hier finden Sie eine kurze Einführung, wie Sie diesen Effekt erzielen, um sich mit der Anwendung einiger CSS-Eigenschaften vertraut zu machen. Schauen wir uns zunächst ein Codebeispiel an:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>document</title>
<style type="text/css">
img{
  border:5px solid #696;
  padding:5px;
  background-color:#CCC;
}
</style>
</head>
<body>
<img src="mytest/demo/dborder.jpg"/>
</body>
</html>

Der obige Code erzielt diesen Effekt, indem er den Rahmen und den Abstand des a1f02c36ba31691bcfe87b2722de723b-Tags festlegt. Insbesondere denken viele Anfänger, dass es sich bei a1f02c36ba31691bcfe87b2722de723b um einen textähnlichen Inhalt handelt. Dies ist jedoch nicht der Fall Der innere Rand kann dafür eingestellt werden.

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo fügen Sie einem Bild in CSS zwei Ränder hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn