Heim > Artikel > Web-Frontend > 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:453331Durchsuche

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:

Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?

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!

css 指针选择器

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

Vorheriger Artikel：CSS-Anzeigeattribut: Das Layout wird über den Inline-Block-Attributwert implementiertNächster Artikel：CSS-Anzeigeattribut: Das Layout wird über den Inline-Block-Attributwert implementiert

In Verbindung stehende Artikel

Mehr sehen