repeating-radial-gradient() Property
تابع ()repeating-radial-gradient
در CSS تصویری از تکرار شیب رنگ از نقطه مبدا می سازد.
این تابع مانند ()radial-gradient
دارای همان شناسه هاست، اما طیف های رنگی را بصورت بی پایان در تمام جهات تکرار می کند.
نحوه نوشتار
background: repeating-radial-gradient(yellow, red, blue); background: repeating-radial-gradient(yellow 33%,red 34% 67%, blue 68%); background: repeating-radial-gradient(ellipse at right, yellow, red, blue); background: repeating-radial-gradient(circle farthest-side at right, yellow 33%, red 34% 67%); background: repeating-radial-gradient(رنگ آخر , ... , رنگ اول , موقعیت و فُرم گرداینت);
در این تابع در هر تکرار، موقعیت رنگ ها شیفت می شود (به اندازه فاصله ای که مابین رنگ اول و رنگ تعریف شدۀ آخر وجود دارد).
در مثال زیر نحوه عملکرد این تابع CSS را میبینیم:
html
<section> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </section>
css
section { display: flex; justify-content: space-around; flex-wrap: wrap; } div { width: 200px; height: 200px; } .box1 { background: repeating-radial-gradient( at bottom, yellow 0% 1%, red 2% 3%, blue 4% 5% ); border-radius: 100%; } .box2 { background: repeating-radial-gradient(red 15%, blue 30%); border-radius: 100%; } .box3 { background: repeating-radial-gradient(red 10%, white 40%); }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگر
تمام مرورگرها از این تابع CSS پشتیبانی می کنند.