ຫົວຂໍ້ທີ່ນຳໃຊ້ CSS linear-gradient()

ການກໍານົດ ແລະ ການນໍາໃຊ້

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' ຕາມມາດ້ວຍຫຼາຍຫຼືສອງພາສາຫຼັກເລີກ:

  • left ຫຼື right
  • top ຫຼື bottom

ຈຳນວນພົນລະເຮືອນ: to bottom (ໄປທາງລຸ່ມ)

angle

ທາງເລືອກ. ການສ້າງສາຍການສະແດງສະແດງສະແດງສະແດງ:

  • 0deg ຕື່ມມີ: to top (ໄປທາງສູງ)
  • 180deg ຕື່ມມີ: to bottom (ໄປທາງລຸ່ມ)
  • 270deg ຕື່ມມີ: to left (ໄປທາງຊາຍ)
  • 90deg ຕື່ມມີ: to right (ໄປທາງຂວາ)
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() ພະລັງງານ

ກ່າວເຖິງຫົວຂໍ້ຫຼັກ repeating-linear-gradient() ພະລັງງານ

ກ່າວເຖິງປະສົມຄະຕິ CSS repeating-radial-gradient()