CSS Gradient-Border nasıl yapılır?
Published in
2 min readOct 23, 2019
Mdn’de ki tanıma göre border-image element etrafında bir resim çizer ve bunu elementin etrafında ki border ile değiştirir.
.one{
border-image:linear-gradient(to right, orange,red ,purple ) 30;
}border image’ın source değeri olarak linear-gradient() fonksiyonu verildi. Linear gradiente “to right” ile gradientin hangi yöne olacağı belirtildi.
İkinci değerimiz ile border-image-slice değerini vermiş olduk. 30 değeri ile bütün kenarlardan olan uzaklık değerini vermiş olduk.
Dilerseniz de url() fonksiyonu ile .png/.jpg benzeri dosyaları kullanabilirsiniz.
.two{
border-image: url(http://lorempixel.com/output/food-q-c-200-80-4.jpg) 30;
}Yukarıda ki örnekte ise border-image kaynağı olarak görüntü kullanıldı. 20 değeri ile resmin her bir kenarından 20 birimlik mesafe keser.
Örneklerin codepen linki:
Yararlanılan kaynaklar:
