Havalı bir kenarlık oluşturmak için konik gradyanlar kullanın

Bu güzel kenarlık örneği gibi ilginç efektler oluşturmak için konik renk geçişleri kullanılabilir.

Adam tarafından oluşturulmuş bu CodePen Argyle, ilk olarak bu yolla paylaşıldı tweet atın bir konik'in nasıl kullanılacağını kenarlık oluşturun.

.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%)
  );
}

Yaratıcı bir şekilde Terry Mun çatallanmış Adem'in kod yazması ile bunu CodePen. Farenizi öğesini bir araya getirirsiniz ve biraz JavaScript kullanımı sayesinde döndürme açısını depolayan CSS özel özelliğinin güncellenmesi

Bu örneklerde border-image-source Bu özellik, bir öğenin kenarlık. Resim değerini kabul eden diğer mülklerde olduğu gibi, türü de geçerlidir.

border-image-source

Tarayıcı Desteği

  • Chrome: 15.
  • Kenar: 12.
  • Firefox: 15.
  • Safari: 6.

Kaynak

Konik gradyanı

Tarayıcı Desteği

  • Chrome: 69.
  • Kenar: 79.
  • Firefox: 83.
  • Safari: 12.1

Kaynak