ويمكن استخدام التدرجات المخروطية لإنشاء بعض التأثيرات المثيرة للاهتمام، مثل هذا المثال الحدودي الرائع.
يعرض CodePen هذا الذي أنشأه Adam Argyle، والذي تمت مشاركته في الأصل عبر هذه التغريدة على Twitter، كيفية استخدام تدرج مخروطي لإنشاء حد.
.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%)
);
}
أنشأ تيري مون بشكل إبداعي ترميز "آدم" البرمجي وأنشأ رمز CodePen هذا. حرِّك الماوس فوق العنصر وسترى التغيير في التدرج، وذلك بفضل القليل من تحديث JavaScript لخاصية CSS مخصصة تخزّن زاوية التدوير.
تستخدم هذه الأمثلة السمة
border-image-source. تعيّن هذه الخاصية الصورة المصدر المستخدمة لإنشاء حدود العنصر. كما هو الحال مع الخصائص الأخرى التي تقبل قيمة الصورة، يكون أي نوع تدرج CSS صالحًا أيضًا.
border-image-source
متدرج مخروطي