از گرادیان های مخروطی برای ایجاد یک حاشیه سرد استفاده کنید
bookmark_borderbookmark
با مجموعهها، منظم بمانید
ذخیره و دستهبندی محتوا براساس اولویتهای شما.
شیب مخروطی را می توان برای ایجاد برخی جلوه های جالب استفاده کرد، مانند این نمونه حاشیه زیبا.
این 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
گرادیان مخروطی
جز در مواردی که غیر از این ذکر شده باشد،محتوای این صفحه تحت مجوز Creative Commons Attribution 4.0 License است. نمونه کدها نیز دارای مجوز Apache 2.0 License است. برای اطلاع از جزئیات، به خطمشیهای سایت Google Developers مراجعه کنید. جاوا علامت تجاری ثبتشده Oracle و/یا شرکتهای وابسته به آن است.
تاریخ آخرین بهروزرسانی 2022-05-27 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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 بهوقت ساعت هماهنگ جهانی."],[],[]]