Wie kann ich in CSS nur Eckenrahmen erstellen?

Eckrahmen mit CSS erstellen

In CSS ist es möglich, ein unverwechselbares Erscheinungsbild zu erzielen, indem Rahmen nur an den Ecken eines Elements angezeigt werden. Dieser Effekt wird häufig im Design verwendet, um dekorative Rahmen zu erstellen oder bestimmte Bereiche hervorzuheben.

CSS-Lösung

Hier ist ein Codeausschnitt, der nur Eckränder erstellt:

img {
  --s: 50px; /* the size on the corner */
  
  padding: 20px; /* the gap between the border and image */
  border: 5px solid #B38184; /* the thickness and color */
  -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;
}

Erklärung

Diese Lösung nutzt die -webkit-mask-Eigenschaft zum Erstellen eines konischen Farbverlaufs. Der Farbverlauf wird durch zwei unterschiedliche Farbstopps definiert: einen an der Ecke (75 %) und einen am Anfang (0 %). Durch Anwenden dieser Maske wird der Rand außer an den Ecken effektiv verdeckt.

Änderung

Um die Größe der Ecken anzupassen, ändern Sie einfach den Wert von -- s variabel. Darüber hinaus können Sie die Rahmenstärke und -farbe nach Wunsch anpassen.

Alternative Lösung

Einige CSS-Bibliotheken, wie z. B. PureCSS, bieten vorab erstellte CSS-Klassen für Nur-Ecken-Ränder. Dieser Ansatz vereinfacht den Code noch weiter:

img {
  border-radius: 10px;
}

.border-corner-only {
  border-width: 0px;
  border-top-width: 5px;
  border-right-width: 5px;
  border-bottom-width: 0px;
  border-left-width: 5px;
}

Indem Sie das Bild in ein Element mit der Klasse „border-corner-only“ einschließen, können Sie Eckränder ganz einfach anwenden, ohne dass komplexe Maskierungstechniken erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS nur Eckenrahmen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!