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