CSS repeating-linear-gradient() 函数

定义和用法

CSS repeating-linear-gradient() 函数用于重复线性渐变。

实例:

线性渐变 重复线性渐变
linear-gradient(red, yellow, blue); repeating-linear-gradient(red, yellow 10%, blue 20%);

实例

តូចទី 1

រូបភាពរង្វាន់រូបរាងដែលប្រើប្រាស់មួយ:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

ពិសោធន៍ខ្លួនឯង

តូចទី 2

រូបភាពរង្វាន់រូបរាងដែលប្រើប្រាស់បន្តបន្ទាប់:

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

ពិសោធន៍ខ្លួនឯង

CSS ភាសាហុយវ៉ា

repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
តួលេខ ការពន្យល់
angle កំណត់ទីតាំងភ្លើងរបស់ខ្សែរង្វាន់ ពី 0deg ទៅ 360deg ។ តួលេខបន្ទាប់បន្សំជាលក្ខណៈកំរាប់ 180deg。
side-or-corner

កំណត់ទីតាំងចាប់ផ្តើមរបស់ខ្សែរង្វាន់。

វាលើកទាំងពីរមានចំណងជាមួយគ្នា: ដំបូងជារបស់ខ្សែខ្នាត (left ឬ right),ទីពីរជារបស់ទិស (top ឬ bottom)。

អាចផ្តើមចាប់ពីមុខ ហើយរាល់ការលើកថ្មីក៏ជាការបន្លិចមួយ។

color-stop1, color-stop2,...

ចំណុចបញ្ចប់ពណ៌គឺជាពណ៌ដែលអ្នកចង់បង្ហាញនៅចន្លោះនៃការប្រែប្រួលភាពខ្លាច់ដោយស្ងាត់។

តួលេខនេះបង្កើតឡើងដោយពណ៌រង្វាន់ និងមួយ ឬពីរចំណុចបញ្ចប់ជាក្រោមសម្រាប់ (0% ទៅ 100% រវាងភាពបង្កើត ឬក៏កំពស់តាមរង្វាន់) របស់ប្រើប្រាស់。

ពត៌មានបច្ចេកទេស

កំណែតំរូវការ: CSS Images Module Level 3

ការគាំទ្រនៃកម្មវិធីអ៊ីនធឺណេត

តួលេខនៅក្នុងតុក្ការបង្ហាញការគាំទ្រតាមប៉ុស្តិ៍ដែលជាប៉ុស្តិ៍ដំបូងដែលគាំទ្រអត្ថប្រយោជន៍នេះ。

Chrome Edge Firefox Safari Opera
repeating-linear-gradient()
26 10 16 6.1 12.1
ចំណុចបញ្ចប់ពណ៌ពីរទី
71 79 64 12.1 58

ទំព័រពាក់ព័ន្ធ

បណ្តុះបណ្តាល:CSS រូបភាពរង្វង់

参考:Atributo ng background-image ng CSS

参考:CSS conic-gradient() អត្ថប្រយោជន៍

参考:CSS linear-gradient() អត្ថប្រយោជន៍

参考:CSS radial-gradient() អត្ថប្រយោជន៍

参考:CSS repeating-conic-gradient() 函数

参考:CSS repeating-radial-gradient() 函数