שימוש בהדרגה של חרוטים ליצירת גבול מגניב
bookmark_borderbookmark
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
אפשר להשתמש בצבעים מדורגים בעלי צורה חרוטית כדי ליצור אפקטים מעניינים, כמו הדוגמה הזו של גבול יפה.
CodePen הזה, שנוצר על ידי Adam
Argyle, ששותף במקור דרך הציוץ הזה ב-Twitter, מראה איך להשתמש בשיפוע conic כדי ליצור גבול.
.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 השתמש ביצירתיות כדי לפצל את הקוד של Adam ב-CodePen וליצור את CodePen הזה. אם תעבירו את העכבר מעל הרכיב, תוכלו לראות את השינוי בגוון ההדרגתי, בזכות קצת קוד JavaScript שמעדכן מאפיין CSS מותאם אישית שמאחסן את זווית הסיבוב.
בדוגמאות האלה נעשה שימוש בנכס border-image-source
. הנכס הזה מגדיר את קובץ האימג' המקור שמשמש ליצירת גבול של רכיב. כמו במאפיינים אחרים שמקבלים ערך של תמונה, גם כל סוג של שיפוע ב-CSS תקף.
border-image-source
שינוי הדרגתי חרוט
אלא אם צוין אחרת, התוכן של דף זה הוא ברישיון Creative Commons Attribution 4.0 ודוגמאות הקוד הן ברישיון Apache 2.0. לפרטים, ניתן לעיין במדיניות האתר Google Developers. Java הוא סימן מסחרי רשום של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2022-05-27 (שעון UTC).
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2022-05-27 (שעון UTC)."],[],[]]