Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Kaynak

Konik gradyanı

Tarayıcı Desteği

Kaynak