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

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

奋力向前

Freigeben： 2021-08-19 19:11:52

Original

21162 Leute haben es durchsucht

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>

Nach dem Login kopieren

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;

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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!