ປະກອບຕົວ CSS border-end-end-radius
- ບ່ອນໜ້າຫນຶ່ງ border-color
- ບ່ອນໜ້າຫນຶ່ງ border-end-start-radius
定义和用法
border-top-right-radius
属性用于定义元素块方向末尾(block-end)和行内方向末尾(inline-end)之间的圆角半径。
ເຫັນຫຍັງ:CSS ປະກອບທີ່ກ່ຽວຂ້ອງ ການພາກສາບັນດາຈຳນວນທີ່ຕາມການຫລັງໃສ່ບັນດາຈຳນວນທີ່ຕາມການຫລັງ.
,text-orientation
, ຕົວຢ່າງ 2: ທີ່ບໍ່ພົບກັບບັນດາປະສົມປະສານ direction
ກໍານົດການອອກສຽງທຳອິດ ແລະທຳອິດ. ສຳລັບການມີປະກອບນີ້ ຈະມີຜົນກະທົບໃຫ້ border-top-right-radius
ຜົນຂອງປະກອບ. ສໍາລັບຫົວໜ້າພາສາອັງກິດ ການແທນທຳອິດຈະຈາກຊ້າຍໄປຊາຍ ແລະທຳອິດຈະຈາກຕົ້ນຫາຫລັງ.
ຖ້າ border-top-right-radius
ຖ້າປະກອບມີຄຸນະພາບສອງຄັ້ງ ວອຍດັບຮອຍຈະເປັນວົງທັນກະພິບ:
border-end-end-radius: 50px 100px;
ຖ້າ border-top-right-radius
ປະກອບມີຄຸນນະພາບໜຶ່ງຄັ້ງ ແລ້ວວອຍດັບຮອຍຈະເປັນວົງດາວ:
ເພື່ອໃຫ້ບັນດາຈຳນວນທີ່ພົບກັບບັນດາຈຳນວນທີ່ຕາມການຫລັງໃສ່ຫລັງ. ຕົວຢ່າງ 1
CSS border-top-right-radius
CSS ຄືກັບ
,border-bottom-left-radius
,border-bottom-right-radius
, border-top-left-radius
ແລະ border-top-right-radius
ຄືກັນຫລາຍຢ່າງ ແຕ່
border-end-end-radius
ຈຳນວນຂອງບັນດາປະສົມປະສານຕິດຄັງກັບການພາກສາບັນດາຈຳນວນທີ່ຕາມການຫລັງ.
ຕົວຢ່າງ
direction #example4 { ເພື່ອໃຫ້ບັນດາຈຳນວນທີ່ພົບກັບບັນດາຈຳນວນທີ່ຕາມການຫລັງໃສ່ຫລັງ. ຕົວຢ່າງ 1 border-end-end-radius: 25px; ຜົນກະທົບຂອງບັນດາປະສົມປະສານ: #example4 { border-end-end-radius: 50px; border-end-end-radius: 25px; border-end-end-radius: 50px 20px; #example4 { background-color: lightblue; #example1 { border-end-end-radius: 25px; #example3 { #example4 { background-color: lightblue; border: 2px solid red; border-end-end-radius: 25px;
border-end-end-radius: 50%;
ຕົວຢ່າງ 3: ທີ່ບໍ່ພົບກັບບັນດາປະສົມປະສານ writing-mode ຕົວຢ່າງ 2: ທີ່ບໍ່ພົບກັບບັນດາປະສົມປະສານ direction
writing-mode
direction #example2 { #example1 { writing-mode: vertical-rl; border-end-end-radius: 25px;
direction: rtl;
ຕົວຢ່າງ 3: ທີ່ບໍ່ພົບກັບບັນດາປະສົມປະສານ writing-mode ການພາກສາບັນດາຈຳນວນທີ່ຕາມການຫລັງໃສ່ບັນດາຈຳນວນທີ່ຕາມການຫລັງ.
writing-mode
ຜົນກະທົບຂອງບັນດາປະສົມປະສານ: #example2 { border: 2px solid red; writing-mode: vertical-rl; border-end-end-radius: 25px;
ການທົດລອງດາວໂຕຂອງເຈົ້າ:
ສັບພາສາ CSSມູນຄ່າສົມທອນ.border-end-end-radius: 0|
|initial|inherit;
ຈຳນວນບັນດາມູນຄ່າ | ຈຳນວນ |
---|---|
0 | ການອະທິບາຍ |
ມູນຄ່າສົມທອນ. | ສະແດງການຮອບວຽນຕົວຂອງຫລັງບັນດາຈຳນວນທີ່ຕາມການຫາຍໃສ່ຫລັງ. length |
% | ສະແດງການຮອບວຽນຕົວຂອງວຽນຕົວພາກສັນຍານໃນສັນຍານທີ່ພາກສັນຍານດ້ານຫລັງ. % |
initial | ຕັ້ງຈຳນວນນີ້ສຳລັບມູນຄ່າສົມທອນຕົ້ນໃນ. ບັນຈາກ: initial. |
inherit | ຍິນຍອມການຂອງບັນດາຈຳນວນນີ້ຈາກປະຈຳປະຈຳເອກະຊົນທີ່ແທນ. ບັນຈາກ: inherit. |
ຂໍ້ມູນດ້ານເຕັກນິກ
ມູນຄ່າສົມທອນ: | 0 |
---|---|
ຄວາມສຳຜັດ: | ບໍ່ |
ການສ້າງການສັນນິລະພາບ: | ສະໜັບສະໜຸນ. ບັນຈາກ:ປະສົມປະສານທາງການສັນນິລະພາບ. |
ລະບົບ: | CSS3 |
ສັບພາສາ JavaScript: | object.style.borderEndEndRadius="50px" |
ການສະໜັບສະໜຸນບັນດາຊາວນະຄອນ
ຈຳນວນບັນທຶກໃນຕາລະບັນຍັດສະແດງການວ່າ ເຄືອງທີ່ສະແດງການສະໜັບສະໜຸນສະບາຍນີ້ຫລັງຈາກການການຄົ້ນຫາ
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
89.0 | 89.0 | 66.0 | 15.0 | 75.0 |
ເບີ່ງຂໍ້ມູນ
ການສອນການກະຈາຍວົງກວ້າງຂອງ CSS
ກ່ຽວກັບປະກອບຕົວ CSS border-bottom-left-radius
ກ່ຽວກັບປະກອບຕົວ CSS border-bottom-right-radius
ກ່ຽວກັບລະບົບ CSS border-top-left-radius
ກ່ຽວກັບລະບົບ CSS border-top-right-radius
ກ່ຽວກັບບັນດາຄຸນສະແດງ direction
- ບ່ອນໜ້າຫນຶ່ງ border-color
- ບ່ອນໜ້າຫນຶ່ງ border-end-start-radius