CSS inset() ฟังก์ชัน

การกำหนดและการใช้งาน

CSS inset() ฟังก์ชันนี้กำหนดสี่เหลี่ยมจัตุรัสที่มีระยะห่างที่กำหนดจากขอบอันดับทุกขอบของต้องการเฉพาะ

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)

รายละเอียดเทคนิค

การสนับสนุนบราวเซอร์

ตัวเลขในตารางนี้แสดงค่าสำหรับเวอร์ชันบราวเซอร์ที่สนับสนุนฟังก์ชันนี้เต็มที่

หน้าที่เกี่ยวข้อง

อ้างอิง：CSS ทางแบบตัด

อ้างอิง：CSS shape-outside คุณสมบัติ

อ้างอิง：CSS circle() ฟังก์ชัน

อ้างอิง：ฟังก์ชัน CSS ellipse()

อ้างอิง：ฟังก์ชัน CSS polygon()