CSS inset() ຫົວພາສາ

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

CSS inset() ການກໍານົດຂອງ CSS ກຳນົດວ່າບວຍບານບອນທີ່ຈະມີຄວາມຫ່າງຈາກຫຼັງຂອງການຍາຍບອນຫຼັງ.

inset() ການພົບກັບ clip-path ລະບຽບ shape-outside ການສະແດງວຽກງານກັບບັນດາລະບຽບ.

ພາບລວມ

ບັນທັດ 1

ຈະການຕັດສິນງານສອງ <div> ສິ່ງຫົວຫຼັງທີ່ຈະມີຄວາມຫ່າງຈາກຫຼັງຂອງຂອງການຍາຍບອນຫຼັງທີ່ຈະມີຄວາມຍາວຫົວຫຼັງ.

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(15px);
}
#pinkDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: pink;
  clip-path: inset(5% 10% 15% 10% round 20px);
}

ທຳນາຍຕີນັກພະຍາຍາມ

ບັນທັດ 2

ນຳໃຊ້ clip-path ແລະ inset() ຈະປະຕິບັດພາບການສະແດງ:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: inset(10% round 20px);
}
@keyframes mymove {
  50% {clip-path: inset(50% round 50px);}
}

ທຳນາຍຕີນັກພະຍາຍາມ

ບັນທັດ 3

ຈັດຕັ້ງຮ່ວມ inset()ຫຼາຍກວ່າclip-path ແລະ shape-outside:

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(45px 50px 15px 0 round 50px);
  shape-outside: inset(40px 40px 10px 0 round 50px);
}

ທຳນາຍຕີນັກພະຍາຍາມ

ສັບສິນຄວາມCSS

inset(length-percentage round border-radius)

ລະອຽດເຕັກນິກ

ການສະໜັບສະໜູນບັນຊີບັນນາທິການ

ຈຳນວນທີ່ຢູ່ໃນຕາມການເບິ່ງວ່າ ການສະໜັບສະໜູນຂອງສາຍອາຊີບທີ່ສະໜັບສະໜູນຫົວພາສານັ້ນຄັ້ງທຳອິດ.

ຫົວຂໍ້ທີ່ກ່ຽວຂ້ອງ

参考：ປະເພດ clip-path

参考：ບັນດາຄວາມ CSS shape-outside

参考：CSS circle() ຫົວພາສາ

参考：CSS ellipse() 函数

参考：CSS polygon() 函数