Heim >Web-Frontend >CSS-Tutorial >Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?
Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?
- 藏色散人Original
- 2018-08-10 13:35:453450Durchsuche
In diesem Artikel erfahren Sie, wie Sie mit CSS Rahmen zu Bildern hinzufügen. Beim Erstellen einer Website besteht der besondere Effekt des Hinzufügens von Rahmen zu CSS-Bildern im Allgemeinen darin, Produktbilder hervorzuheben oder Bilder anzuzeigen Benutzer wollen klicken. Tatsächlich können viele Lösungen für das Problem, wie man Rahmen zu CSS-Bildern hinzufügt, durch eine einfache Suche im Internet gefunden werden. Aber heute werde ich den einfachsten Code verwenden, um zu demonstrieren, wie man Rahmen mit CSS hinzufügt. Ich hoffe, es hilft den Interessierten.
Das spezifische Codebeispiel zum Hinzufügen von Rahmen zu CSS-Bildern lautet wie folgt:
<!DOCTYPE HTML>
<html>
<head>
<title>css图片加边框代码测试</title>
<meta charset="UTF-8">
<style type="text/css">
body{background: #ffffff;color:#06c;}
em{ font-style:inherit;}
img{background:white;margin:0 5px;width:70px;height:70px;}
img:hover{border:1px red solid;}
.demo2 img{border:1px solid transparent;}
.demo2 img:hover{border:1px red solid;}
.demo3 img:hover{width:68px;height:68px;border:1px solid yellow;}
</style>
</head>
<body>
<div>
<img src="1.png" / alt="Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?" >
<img src="1.png" / alt="Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?" >
<img src="1.png" / alt="Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?" >
<img src="1.png" / alt="Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?" >
<em>这里可以明显看到当img标签在hover的时候由于出现边框导致位移</em>
</div>
<div>
<img src="2.png" / alt="Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?" >
<img src="2.png" / alt="Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?" >
<img src="2.png" / alt="Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?" >
<img src="2.png" / alt="Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?" >
<em>在这里给每个img添加border:1px solid transparent;</em>
</div>
<div>
<img src="1.png" / alt="Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?" >
<img src="1.png" / alt="Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?" >
<img src="1.png" / alt="Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?" >
<img src="1.png" / alt="Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?" >
<em>在这里修改width和height</em>
</div>
</body>
</html>Der Testeffekt des obigen Codes ist wie folgt:
Hinweis: Der :hover-Selektor wird verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt.
Tipp: Der :hover-Selektor kann für alle Elemente verwendet werden, nicht nur für Links.
Tipp: Der :link-Selektor legt den Stil von Links fest, die auf Seiten verweisen, die nicht besucht wurden. Der :visited-Selektor wird verwendet, um Links auf Seiten zu setzen, die besucht wurden, und der :active-Selektor wird für verwendet aktive Links.
Hinweis: In der CSS-Definition muss :hover nach :link und :visited (falls vorhanden) stehen, damit der Stil wirksam wird.
In diesem Artikel wird ausführlich beschrieben, wie man Rahmen zu CSS-Bildern hinzufügt. Ich hoffe, dass er Freunden in Not hilfreich sein wird.
Das obige ist der detaillierte Inhalt vonWie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!