ניתן להשתמש בהדרגות חרוטות כדי ליצור אפקטים מעניינים, כמו הדוגמה הנחמדה של גבול.
ה-CodePen הזה שנוצר על ידי אדם ארג'יל שותף במקור דרך הציוץ הזה ב-Twitter, ומדגים איך להשתמש ב-conic gradלדוגמה כדי ליצור גבול.
.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%)
);
}
Terry Mun באופן יצירתי קיבוע את הקוד של אדם ויצר את ה-CodePen הזה. אם תעבירו את העכבר מעל הרכיב, תוכלו לראות את שינוי ההדרגתיות בעזרת מעט JavaScript, שמעדכן מאפיין מותאם אישית של CSS שמאחסן את זווית הסיבוב.
בדוגמאות האלה השתמשנו בנכס border-image-source. המאפיין הזה מגדיר את תמונת המקור המשמשת ליצירת הגבול של רכיב. בדומה למאפיינים אחרים שמקבלים ערך של תמונה, כל סוג של מעבר הדרגתי ב-CSS הוא חוקי גם.
border-image-source
צבע חרוט הדרגתי