ຫົວຂໍ້ທີ່ນຳໃຊ້ CSS linear-gradient()
- ບ່ອນໄປຫຼັງ ປະສົມຄະຕິ light-dark()
- ບ່ອນໄປຕໍ່ໄປ ປະສົມຄະຕິ log()
- ກັບຄືນປີ່ຫຼັງ ຄູ່ມວຍການ ຄຳຄົນເລືອກ CSS
ການກໍານົດ ແລະ ການນໍາໃຊ້
CSS linear-gradient()
ຫົວຂໍ້ທີ່ນຳໃຊ້ສ້າງການສົ່ງແສງສະຫຼາດລະຫວ່າງຄືກັບບໍລິການບໍລິການບໍລິການ.
ເພື່ອສ້າງການສົ່ງແສງສະຫຼາດລະຫວ່າງສະຫຼາດ, ຕ້ອງການກໍານົດສາມາດສີສອງຫຼັກ. ສາມາດສີແມ່ນສີທີ່ເຈົ້າຕ້ອງຈະປ່ຽນສີບໍ່ຫຼາຍຫຼາຍ. ທ່ານກໍ່ສາມາດການກໍານົດຂັ້ນຕົ້ນ ແລະການແລ່ນ (ຫຼືອັນດັບ) ແລະການສົ່ງແສງລະຫວ່າງ.
ຕົວຢ່າງການສົ່ງແສງສະຫຼາດລະຫວ່າງ:
ຄວາມຈຳນວນ
ຕົວຢ່າງ 1
ການສົ່ງແສງສະຫຼາດລະຫວ່າງຈາກສາຍສູງ. ມັນຈະປ່ຽນສີຈາກສີແລນຫາສີເກຣີສ, ແລະຫາສີຂຽວ:
#grad { background-image: linear-gradient(red, yellow, blue); }
ຕົວຢ່າງ 2
ການສົ່ງແສງສະຫຼາດລະຫວ່າງຈາກປະຕູສາຍດ້ານຂາຍ. ມັນຈະປ່ຽນສີຈາກສີແລນຫາສີຂຽວ:
#grad { background-image: linear-gradient(to right, red , blue); }
ຕົວຢ່າງ 3
ການສົ່ງແສງສະຫຼາດລະຫວ່າງຈາກປະຕູສັ້ນສາຍດ້ານຂາຍ (ແລະຂຶ້ນຫາສາຍດ້ານຊາຍສາຍໃຕ້):
#grad { background-image: linear-gradient(to bottom right, red , blue); }
ຕົວຢ່າງ 4
ການສົ່ງແສງສະຫຼາດລະຫວ່າງກັບການກໍານົດອັນດັບ:
#grad { background-image: linear-gradient(180deg, red, blue); }
ຕົວຢ່າງ 5
ການສົ່ງແສງສະຫຼາດລະຫວ່າງສາມາດຫຼາຍລາຍການສີ:
#grad { background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); }
ຄວາມທົດລອງ 6
ການສ້າງສາຍການສະແດງສະແດງທີ່ມີສີມີອັກສາຄັນປະກອບຕົວສອງບ່ອນ:
#grad { background: linear-gradient( to right, red 17%, orange 17% 34%, yellow 34% 51%, green 51% 68%, blue 68% 84%, indigo 84% ); }
ຄວາມທົດລອງ 7
ການສ້າງສາຍການສະແດງສະແດງສະແດງທີ່ມີຄວາມປອດໄພ:
#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }
ການບັນນາທິການ CSS
linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);
ຈຳນວນພົນລະເຮືອນ | ການອະທິບາຍ |
---|---|
side-or-corner |
ທາງເລືອກ. ການສ້າງພື້ນສະແດງສະແດງສະແດງ: ກັບພາສາຫຼັກ 'to' ຕາມມາດ້ວຍຫຼາຍຫຼືສອງພາສາຫຼັກເລີກ:
ຈຳນວນພົນລະເຮືອນ: to bottom (ໄປທາງລຸ່ມ) |
angle |
ທາງເລືອກ. ການສ້າງສາຍການສະແດງສະແດງສະແດງສະແດງ:
|
color-stop1, color-stop2,... |
ຕ້ອງການ ຄູ່ມູນມີການກໍ່ຕັ້ງຈາກ ສີມີອັກສາຄັນປະກອບຕົວ ຕາມຫຼັງມາ ທີ່ສາມາດເປັນສີມີອັກສາຄັນປະກອບຕົວເລືອກຄັນຄັນໜຶ່ງຫຼືສອງບ່ອນ (ສິບບັນດາບັນທຶກສິບເຊິ່ງໃນ 0% ຫາ 100% ຫຼືການຫຼຸດຂະໜາດຫາຫຼັງທາງການສະພາວະການສະແດງຫຼັງທາງການສະແດງ) |
ຂໍ້ມູນພື້ນຖານເຕັກນິກ
ບັນດາອັນດັບ | CSS3 |
---|
ການສະໜັບສະໜູນບາຣີດເຊີຍ
ຈຳນວນທີ່ຢູ່ໃນຕາຕະລາງ ແມ່ນການສະໜັບສະໜູນໃນບັນດາບາຣີດເຊີຍທຳອິດຂອງພະລັງງານນັ້ນ
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
linear-gradient() | ||||
26 | 10 | 16 | 6.1 | 12.1 |
ສອງບ່ອນຂອງ ສີມີອັກສາ | ||||
71 | 79 | 64 | 12.1 | 58 |
ບາງເວັບໄຊທີ່ກ່ຽວຂ້ອງ
ການສົນະນາວິທະຍາຫົວຂໍ້ຫຼັກ CSS 渐变
ກ່າວເຖິງຄູ່ມວຍການ ຄຳຄົນເລືອກ CSS
ກ່າວເຖິງຫົວຂໍ້ຫຼັກ conic-gradient() ພະລັງງານ
ກ່າວເຖິງຫົວຂໍ້ຫຼັກ radial-gradient() ພະລັງງານ
ກ່າວເຖິງຫົວຂໍ້ຫຼັກ repeating-conic-gradient() ພະລັງງານ
- ບ່ອນໄປຫຼັງ ປະສົມຄະຕິ light-dark()
- ບ່ອນໄປຕໍ່ໄປ ປະສົມຄະຕິ log()
- ກັບຄືນປີ່ຫຼັງ ຄູ່ມວຍການ ຄຳຄົນເລືອກ CSS