עדיין לא קיימת אפשרות מובנית למסגרת בגווני צבע – גרדיאנט ולכן נצטרך לעשות אותה באמצעות CSS.
בשיטות הרגילות לא ניתן לשים עיגול פינות.
לכן נשתמש בשיטת פדינג בוקס ובורדר בוקס. שני רקעים שונים תחת אותה הגדרה.
selector{
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(60deg, #00f, #00e8ff) border-box;
border: 3px solid transparent;
border-radius: 80px!important;
}
והנה התוצאה:
דוגמא גם על כפתור שליחת טופס:
selector button{
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(60deg, #00f, #00e8ff) border-box;
border: 5px solid transparent;
}
התוצאה:
בהצלחה!