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

repeating-linear-gradient() Property

تابع ()repeating-linear-gradient در CSS تصویری از تکرار گرادینت (شیب رنگ) می سازد. این تابع شبیه به ()linear-gradient عمل می کند و شناسه های یکسانی می گیرد، اما رنگ ها را در تمام سطح عنصر تکرار می کند.

نحوه نوشتار

background: repeating-linear-gradient(yellow, red, blue);
background: repeating-linear-gradient(yellow 33%,red 34% 67%, blue 68%);
background: repeating-linear-gradient(to top, yellow, red, blue);
background: repeating-linear-gradient(45deg, yellow 33%, red 34% 67%);

background: repeating-linear-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-linear-gradient(
       to right,
       yellow 0% 1%,
       red 2% 3%,
       blue 4% 5%
    );
}
.box2 {
    background: repeating-linear-gradient(red 15%, blue 30%); 
}
.box3 {
    background: repeating-linear-gradient(45deg, red 10%, white 40%); 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این تابع CSS پشتیبانی می کنند.