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

Randdilemma: Nur Eckränder anzeigen

Wenn Sie nach einer Möglichkeit gesucht haben, Randlinien zu erstellen, die ausschließlich auf die Ecken eines Elements beschränkt sind, CSS ist für Sie da. Im Folgenden führen wir Sie durch eine Lösung, die eine Technik namens „Maskierung“ verwendet.

Der Ansatz besteht darin, einen Rahmen für das gesamte Element zu definieren und dann eine Maske anzuwenden, um den Rahmen bis auf die Ecken selektiv auszublenden. Dies kann mit Hilfe der Funktionen conic-gradient() und linear-gradient() erreicht werden.

So können Sie es tun:

img {
  --s: 50px; /* Adjust this value to change the corner size */
  
  padding: 20px; /* Modify this value to alter the gap between the border and image */
  border: 5px solid #B38184; /* Change the border thickness and color as needed */
  -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;
}

Der conic-gradient() erstellt einen Farbverlauf, der den Rand außer an den Ecken verbirgt, während linear-gradient() dafür sorgt, dass die Lücke zwischen dem Rand und dem Bild transparent bleibt.

Durch Anpassen der --s-Wert können Sie die Größe der Eckränder steuern. Im obigen Beispiel ist die Größe auf 50 Pixel eingestellt, sodass Sie scharfe Ecken erhalten.

Sie können diese Technik jetzt in Ihre Projekte integrieren, um optisch ansprechende Ränder zu erstellen, die die Ecken Ihrer Bilder oder anderer Elemente hervorheben.

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