این آموزش در تاریخ ۱۴۰۰/۱۰/۱۹ آپدیت شده است.
آموزش تابع repeating-radial-gradient در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع repeating-radial-gradient در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع repeating-radial-gradient در CSS
با استفاده از تابع repeating-radial-gradient ( در لغت به معنی تکرار شیب شعاعی ) در CSS میتوان یک شیب شعاعی با استفاده از یک یا چندین رنگ ایجاد و یا تعریف نمود.
بطور کلی این تابع همان تابع radial-gradient می باشد، فقط در این تابع میتوان مشخص کرد که رنگ هنگام پاشیده شدن بصورت بی نهایت تکرار شود.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از تابع repeating-radial-gradient در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از جهت و شکل ( شکل دایره ای – از سمت بالا » چپ )
|
1 2 3 4 5 6 7 8 9 |
<style> div{ background-image: repeating-radial-gradient(circle at top left , green 20%, lime 40%); width:200px; height:200px; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع repeating-radial-gradient در CSS پشتیبانی میکنند یا خیر.
| نام تابع | Chrome | Firefox | Opera | Safari | Edge |
| ()repeating-radial-gradient | ۲۶ | ۱۶ | ۱۲٫۱ | ۷ | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
|
1 |
repeating-radial-gradient( shape size at position, start_color, ... , end_color ); |
Free-Learn
جدول مقادیر تابع repeating-radial-gradient در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||||
|---|---|---|---|---|---|
| shape | شکل شیب شعاعی را مشخص میکند ellipse ( بیضی – مقدار پیش فرض ) circle ( دایره ای ) |
||||
| size | سایز / اندازه نمایشی شکل شیب شعاعی را مشخص میکند – مشاهده مثال farthest-corner ( پیش فرض – دور از گوشه ها ) closest-side ( نزدیک اطراف ) closest-corner ( نزدیک گوشه ها ) farthest-side ( دور از اطراف ) |
||||
| position | موقعیت یا محل قرار گیری را مشخص میکند ( پیش فرض مقدار center می باشد، یا هم بصورت ۵۰% ۵۰% ) استفاده از کلمات کلیدی مجاز زیر : at top at bottom at left at right at top right at top left at bottom right at bottom left یا استفاده از واحدهای اندازه گیری همچون پیکسل یا درصد : مثال ( مقدار اول بصورت افقی و مقدار دوم عمودی را مشخص میکند )
|
||||
| start_color , … , end_color | رنگ شماره ۱ , رنگ شماره ۲ و… |
Free-Learn
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.
