تابع ()repeating-radial-gradient در CSS

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 پشتیبانی می کنند.