Wie kann ich CSS-Rahmen erstellen, die nur an den Ecken eines Elements angezeigt werden?

Rahmenecken mit CSS erstellen

Frage: Ist es möglich, einen Rahmen zu erstellen, der nur an den Ecken erscheint? eines Element?

Antwort:

Ja, es ist möglich, diesen Effekt durch eine Kombination von CSS-Techniken zu erzielen. Sehen wir uns eine weniger codeintensive Lösung an:

img {
  --s: 50px; /* Size of the corner */

  padding: 20px; /* Gap between border and image */
  border: 5px solid #B38184; /* Thickness and color of the border */

  -webkit-mask:
    conic-gradient(at var(--s) var(--s), #0000 75%, #000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
}

Dieser Code verwendet einen konischen Farbverlauf, um den Randeffekt an den Ecken zu erzeugen. Der Wert von --s bestimmt die Größe der Ecken. Die Padding-Eigenschaft fügt eine Lücke zwischen dem Rahmen und dem Bild hinzu.

Zur Anpassung können Sie die Größe und Farbe des Rahmens nach Bedarf anpassen:

<img src="image1.png" alt="Image 1">

Dieser Code erstellt einen größeren Rand mit einer hellbraunen Farbe und einer abgerundeteren Ecke.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Rahmen erstellen, die nur an den Ecken eines Elements angezeigt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!