ກອງການ CSS repeating-linear-gradient()
ການອະທິບາຍແລະການນໍາໃຊ້
CSS repeating-linear-gradient() ກອງການສະເພາະຫຼີກຫຼອກຄືນສາຍລະຫວ່າງ
ບໍລິຫານກໍານົດ：
| ການສະເພາະຫຼີກຫຼອກຄືນສາຍ | ການສະເພາະຫຼີກຫຼອກຄືນສາຍລະຫວ່າງ |
|---|---|
| linear-gradient(red, yellow, blue); | repeating-linear-gradient(red, yellow 10%, blue 20%); |
ບໍລິຫານກໍານົດ
ກໍານົດຕົວຢ່າງ 1
ກໍານົດຕົວຢ່າງ 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 渐变
参考：ບັນດາຫົວຂໍ້ຂອງບັນຊີ background-image CSS
参考：ຫົວຂໍ້ຫົວລະບັບ CSS conic-gradient()
参考：ຫົວຂໍ້ຫົວລະບັບ CSS linear-gradient()
参考：ຫົວຂໍ້ຫົວລະບັບ CSS radial-gradient()
