از گرادیان های مخروطی برای ایجاد یک حاشیه سرد استفاده کنید

شیب مخروطی را می توان برای ایجاد برخی جلوه های جالب استفاده کرد، مانند این نمونه حاشیه زیبا.

این CodePen ایجاد شده توسط Adam Argyle ، که در ابتدا از طریق این توییت در توییتر به اشتراک گذاشته شد، نحوه استفاده از گرادیان مخروطی را برای ایجاد حاشیه نشان می دهد.

.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 را ایجاد کرد. به لطف کمی جاوا اسکریپت که یک ویژگی سفارشی CSS را که زاویه چرخش را ذخیره می کند، به روز رسانی می کند، ماوس خود را روی عنصر حرکت دهید و تغییر گرادیان را مشاهده خواهید کرد.

این مثال ها از ویژگی border-image-source استفاده می کنند. این ویژگی تصویر منبع مورد استفاده برای ایجاد حاشیه یک عنصر را تنظیم می کند. مانند سایر خصوصیات که مقدار تصویر را می پذیرند، هر نوع گرادیان CSS نیز معتبر است.

border-image-source

گرادیان مخروطی