ປະກອບປະກອບຄູ່ມູນສາຍສະໜາມ CSS border-end-start-radius

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

border-end-start-radius ຄວາມປະສົງທີ່ນຳໃຊ້ເພື່ອກຳນົດຄວາມເລິກທາງຕົ້ນຂອງບັນດາອົງປະກອບທີ່ມີຄວາມປະສົງທີ່ຫຼັງ(block-end) ແລະການເລີ່ມທາງທີ່ຢູ່ທາງກະຫຼັງ(inline-start) ຂອງຄວາມເລິກທາງທີ່ຢູ່ທາງກະຫຼັງ(inline-start).

ເຫັນເຖິງ:ບັນດາຄວາມປະສົງທີ່ກ່ຽວຂ້ອງ writing-mode,text-orientation ແລະ direction ກຳນົດຕົ້ນມາຫຼັງຂອງບັນດາຄວາມປະສົງແລະການໄປອອກ. ສຳລັບຄວາມປະສົງນີ້, ການປ່ຽນແປງຈະມີຜົນກະທົບຕໍ່ border-end-start-radius ຜົນງານຂອງບັນດາຄວາມປະສົງ. ສຳລັບບັນຊີອັງກິດ, ການໄປອອກຈະມີຕົ້ນມາຫຼັງ, ການກະຈາຍອອກຈະມີຕົ້ນມາຫຼັງ.

ຖ້າ border-end-start-radius ຖານະຜົນງານຂອງບັນດາຄວາມປະສົງທີ່ມີສອງຄຸນນະພາບຜົນງານຈະເປັນວົງຂັອງ:

border-end-start-radius: 50px 100px;

ຖ້າ border-end-start-radius ຖານະຜົນງານຂອງບັນດາຄວາມປະສົງທີ່ມີຄຸນນະພາບຜົນງານຈະເປັນວົງຂັອງ:

border-end-start-radius: 50px;

CSS border-end-start-radius ຄວາມປະສົງຂອງ border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius ແລະ border-top-right-radius ຄືກັນກັບ border-end-start-radius ບັດສະນະຂອງບັດສະນະຕັ້ງໃຈປະກອບທີ່ສະໜາມທາງຕາຍເວນແລະທາງອິນເລຍ.

ຄວາມສົມທົບ

ບັນດາກໍລະນີ 1

ເພື່ອສະໜັບສະໜູນຮູບຮ່າງວຽນນອກສະໝອງຂອງທາງຕາຍເວນແລະທາງສະໜາມໃນທາງອິນເລຍຂອງບັດສະນະບາງປະກອບທີ່ຫຼາຍ.

#example1 {
  background-color: lightblue;
  border-end-start-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-end-start-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-end-start-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-end-start-radius: 50%;
  writing-mode: vertical-rl;
}

ທ້າທາຍດີເອງ

ບັນດາກໍລະນີ 2: ການປະສົມຄວາມສະໜັບສະໜູນ direction

ທີ່ຕອນຫຼັງຂອງທາງຕາຍເວນແລະທາງສະໜາມໃນທາງອິນເລຍຂອງບັດສະນະທີ່ຕອນຫຼັງຂອງທາງຕາຍເວນແລະທາງສະໜາມໃນທາງອິນເລຍ. direction ຜົນກະທົບຂອງບັດສະນະ:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-end-start-radius: 25px;
}

ທ້າທາຍດີເອງ

ບັນດາກໍລະນີ 3: ການປະສົມຄວາມສະໜັບສະໜູນ writing-mode

ທີ່ຕອນຫຼັງຂອງທາງຕາຍເວນແລະທາງສະໜາມໃນທາງອິນເລຍຂອງບັດສະນະທີ່ຕອນຫຼັງຂອງທາງຕາຍເວນແລະທາງສະໜາມໃນທາງອິນເລຍ. writing-mode ຜົນກະທົບຂອງບັດສະນະ:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-end-start-radius: 25px;
}

ທ້າທາຍດີເອງ

ສັບພາສາ CSS:

border-end-start-radius: 0|length|initial|inherit;

ຄວາມສົມທົບຂອງບັດສະນະ.

ຂໍ້ມູນດ້ານເຕັກນິກ

ການສະໜັບສະໜູນບັດນູບ

ຈຳນວນໃນຕາຕະລາງສະແດງກຳນົດສະບັບບັດນູບທີ່ເປັນເພື່ອຄວາມການສະໜັບສະໜູນຂອງບັດນູບທີ່ເປັນສະບັບທຳອິດທີ່ສະໜັບສະໜູນບັດສະນະນັ້ນ.

ບັນດາໜ້າທີ່ກ່ຽວຂ້ອງ

ການສອນ:ການສັນຍາລູກສອງຂອງ CSS

ກ່ຽວກັບ:ປະກອບປະກອບຄູ່ມູນສາຍສະໜາມ CSS border-bottom-left-radius

ກ່ຽວກັບ:ປະກອບປະກອບຄູ່ມູນສາຍສະໜາມ CSS border-bottom-right-radius

ກ່ຽວກັບ:CSS ລະບົບ border-top-left-radius

ກ່ຽວກັບ:CSS ລະບົບ border-top-right-radius

ກ່ຽວກັບ:ລະບົບບໍລິຫານສະແຕກdirection

ກ່ຽວກັບ:ປະເພດ text-orientation

ກ່ຽວກັບ:ປະເພດ writing-mode