suchen

Heim  >  Artikel  >  Web-Frontend  >  Ein Trick, der Ihnen zeigt, wie Sie mithilfe von HTML Randeffekte zu Bildern hinzufügen (ausführliche Code-Erklärung)

Ein Trick, der Ihnen zeigt, wie Sie mithilfe von HTML Randeffekte zu Bildern hinzufügen (ausführliche Code-Erklärung)

奋力向前
奋力向前Original
2021-08-19 18:39:2821120Durchsuche

Im vorherigen Artikel „Lernen Sie Schritt für Schritt, wie Sie mit CSS einen abgerundeten Schaltflächeneffekt erstellen (detaillierte Code-Erklärung)“ habe ich Ihnen gezeigt, wie Sie mit CSS einen abgerundeten Schaltflächeneffekt erstellen. Im folgenden Artikel erfahren Sie, wie Sie mithilfe von HTML Randeffekte zu Bildern hinzufügen können.

Ein Trick, der Ihnen zeigt, wie Sie mithilfe von HTML Randeffekte zu Bildern hinzufügen (ausführliche Code-Erklärung)

So fügen Sie Bildern Randeffekte hinzu Code hinzufügen und Bildeffekte hinzufügen. Es gibt zwei Methoden

Eine Methode: Fügen Sie dem Bild einen Strich hinzu oder fügen Sie dem äußeren Feld einen Strich hinzu.

Zweite Methode: Fügen Sie das IMG-Bild-Tag direkt hinzu.

Wählen Sie eine der beiden Optionen, ich verwende die zweite Methode.

Codebeispiel

<style>
<div>{
 margin-top:50px;
 margin-left: 100px: 
}
</style>
</head>
<body>
<div>
<img  src="787.jpg" alt="Ein Trick, der Ihnen zeigt, wie Sie mithilfe von HTML Randeffekte zu Bildern hinzufügen (ausführliche Code-Erklärung)" >
</div>

Codeeffekt

Ein Trick, der Ihnen zeigt, wie Sie mithilfe von HTML Randeffekte zu Bildern hinzufügen (ausführliche Code-Erklärung)Der Codeeffekt kam heraus und ich stellte fest, dass es keinen Rand gab.

2. Fügen Sie dem Bild Randeinstellungen hinzu, Stil: Randstil, die Stile umfassen Vollton, gestrichelt usw. Die Farbe wird durch Randfarbe und die Dicke durch Randbreite festgelegt.

Hinweis: Der Rahmenstil ist border-style. Dies ist wichtig, da sonst alle anderen Attribute ungültig sind. 

div img{
border-style: dashed;
border-width: 5px;
border-color: blue;

Ein Trick, der Ihnen zeigt, wie Sie mithilfe von HTML Randeffekte zu Bildern hinzufügen (ausführliche Code-Erklärung)Nachdem der Codeeffekt herausgekommen ist, handelt es sich um eine Rahmenfarbe, und jetzt besteht der Rahmen aus einer gepunkteten Linie

3. Kombinieren Sie diese drei Attribute zu einem Attribut, z. B. „border:dashed 5px blue“; ist immer noch das Gleiche, sehr praktisch. 

div img{
border:dashed 5px blue;
}

Ein Trick, der Ihnen zeigt, wie Sie mithilfe von HTML Randeffekte zu Bildern hinzufügen (ausführliche Code-Erklärung)Der Codeeffekt ist immer noch derselbe, da die drei Attribute zu einem Attribut zusammengefasst werden. Dann entscheiden wir uns dafür, Effekte nur auf einer Seite des Bildes hinzuzufügen.

4. Links: Rand-links, rechts: Rand-rechts, oben: Rand-oben, unten: Rand-links. Gemäß dieser Einstellung kann jede Seite unabhängig eingestellt werden.

rrree

Ein Trick, der Ihnen zeigt, wie Sie mithilfe von HTML Randeffekte zu Bildern hinzufügen (ausführliche Code-Erklärung)5. Der Codeeffekt ist fast in diesem Zustand. Steuern Sie die Rahmenfarbe über das Randattribut des Div, stellen Sie die Breite des Rahmens auf 20 Pixel und die Farbe auf Blau ein

div img{
border:dashed 5px blue;
border-right:solid 10px blue; 
border-top: solid 10px blue;
    border-bottom: solid 10px blue;
    border-left:  solid 10px blue;
}

Ein Trick, der Ihnen zeigt, wie Sie mithilfe von HTML Randeffekte zu Bildern hinzufügen (ausführliche Code-Erklärung)Der endgültige Effekt.

Hinweise: Die Zusammensetzung des Rahmenabkürzungsattributs

    border-width: gibt die Breite des Rahmens an;

    • border-style: gibt den Stil des Rahmens an;

    • border-color: gibt an die Farbe des Randes.

    • Empfohlenes Lernen:
Html-Video-Tutorial

Das obige ist der detaillierte Inhalt vonEin Trick, der Ihnen zeigt, wie Sie mithilfe von HTML Randeffekte zu Bildern hinzufügen (ausführliche Code-Erklärung). 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
Vorheriger Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS einen abgerundeten Schaltflächeneffekt erstellen (detaillierte Codeerklärung).Nächster Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS einen abgerundeten Schaltflächeneffekt erstellen (detaillierte Codeerklärung).

In Verbindung stehende Artikel

Mehr sehen