מחולל גבול שיפוע מונפש CSS

גבול מסתובב של קשת נראה פשוט עד שאתה באמת מנסה לבנות אחד ב-CSS: הנפשת זווית בתוך conic-gradient() עם מאפיין מותאם אישית פשוט לא עושה שום דבר מועיל, מכיוון שלדפדפן אין מושג שהערך הוא זווית ואינו יכול לבצע אינטרפולציה בין 0deg ל-360deg - הוא פשוט קופץ. מחולל זה משתמש בתיקון האמיתי, ה-CSS Properties and Values ​​API: `@property --border-angle { תחביר: '<angle>'; ערך התחלתי: 0°; יורש: שקר; }` אומר לדפדפן בדיוק איזה סוג של ערך מחזיק המאפיין המותאם אישית, וזה מה שפותח אינטרפולציה חלקה וידידותית ל-GPU על פני כלל @keyframes.

הטבעת עצמה היא ::-before pseudo-element בגודל גדול יותר מהקופסה (מוכנסת במינוס רוחב הגבול) כשהרקע שלה מוגדר ל-`conic-gradient(from var(--border-angle), ...)` חוזר לצבע הראשון כך שלסוויפ אין תפר גלוי. לאחר מכן מסכה עושה את עבודת העיצוב האמיתית: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` שומר רק על ההבדל בצורת הטבעת בין תיבת הריפוד לתיבת התוכן, ומשליך את מלבן השיפוע המוצק בכל מקום אחר. `-webkit-mask-composite: xor` הוותיק של Safari מבצע את הפעולה הזהה ונשלח לצד המאפיין הסטנדרטי, כך שהאפקט מוצג באופן עקבי במקום להיכשל בשקט במנוע אחד.

תמיכה ברדיוס הגבול אינה מחשבה שלאחר מכן המוברגת למעלה - `רדיוס-גבול: ירושה` של הפסאודו-אלמנט אומר שכל הרדיוס שאתה מחייג לתוך הקופסה נישא אל הטבעת באופן אוטומטי, כך שכפתור בצורת גלולה או כרטיס מעוגל מקבלים גבול זוהר מעוגל במקום קצוות ישרים המדממים מפינות מעוקלות. בדוק את זה בשידור חי: גרור את מחוון הרדיוס ממלבן חד לגלולה מלאה וצפה בטבעת עוקבת אחר הצורה בכל שלב, שהוא הפרט שמפריד בין יישום אמיתי של טכניקה זו לצילום מסך מזויף.

כל השאר בעמוד ממפות ישירות אל הקוד שנוצר: מחוון הרוחב הוא עובי הטבעת והריפוד של הפסאודו-אלמנט, מחוון ה-Duration הוא האנימציה-duration @keyframes, מתג הכיוון פשוט הופך את הסימן של זווית הסיום של ה-keyframe (+360deg או -360deg כל צבע בתוך ה-en- 360deg), קריאה conic-gradient() כל העניין פועל בדפדפן שלך ללא תמונות, ללא לולאת אנימציה מונעת JavaScript וללא שירותים חיצוניים - העתק את בלוק ה-CSS והוא ממשיך להסתובב בכל מקום שתדביק אותו.