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

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.

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.

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;

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; }

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.

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; }

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:

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!