Heim > Artikel > Web-Frontend > 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:403178Durchsuche
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.
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!