Mit kegelförmigen Farbverläufen einen coolen Rahmen erstellen

Mit kegelförmigen Farbverläufen können einige interessante Effekte erzielt werden, z. B. dieses schöne Beispiel mit Rahmen.

Dieser CodePen von Adam Argyle, ursprünglich über dieses Gerät geteilt Tweet auf Twitter, zeigt die Verwendung eines Conic Farbverlauf zu einen Rahmen erstellen.

.conic-gradient-border {
  border: 25px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    hsl(100 100% 60%),
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  );
}

Kreativ von Terry Mun verzweigt Adams Codepen und schuf CodePen Bewegen Sie die Maus über das Der Farbverlauf ändert sich dank JavaScript-Code. Aktualisieren einer benutzerdefinierten CSS-Eigenschaft, die den Rotationswinkel speichert

In diesen Beispielen wird das border-image-source Property. Mit dieser Eigenschaft wird das Quellbild festgelegt, das zum Erstellen eines Elements verwendet wird. Rahmen. Wie bei anderen Eigenschaften, die einen Bildwert akzeptieren, kann jeder CSS-Farbverlauf Typ ist auch gültig.

border-image-source

Unterstützte Browser

  • Chrome: 15. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 15. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Quelle

Kegelförmiger Farbverlauf

Unterstützte Browser

  • Chrome: 69. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 83 <ph type="x-smartling-placeholder">
  • Safari: 12.1 <ph type="x-smartling-placeholder">

Quelle