CSS shape-outside 属性

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

shape-outside คุณสมบัตินี้อนุญาตให้คุณกำหนดรูปที่ล้อมรอบเนื้อหาแนว shape-outsideและคุณสามารถกำหนดวิธีล้อมรอบๆ นี้ด้วยตัวเอง

shape-outside คุณสมบัตินี้กำหนดพื้นที่หลุดขององค์ประกอบหลุด

ตัวอย่าง

ทำให้เนื้อหาแนวล้อมรอบภาพด้วยรูปทรงวงกลม:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

ลองทดลองด้วยตัวเอง

ระบบการเขียน CSS

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|inherit;

ค่าของคุณสมบัติ

ค่า คำอธิบาย
none ค่าเริ่มต้น。พื้นที่หลุดภาพไม่ได้รับผลกระทบ。เนื้อหาแนวในได้รับการล้อมรอบๆ ด้วยกล่องมุมตัวขององค์ประกอบ
margin-box กำหนดรูปที่มีขอบเขตโดยขอบเขตด้านนอกของมุมตัว
border-box กำหนดรูปที่มีขอบเขตโดยขอบเขตด้านนอกของเส้นขอบ
padding-box กำหนดรูปที่มีขอบเขตโดยขอบเขตด้านนอกของปริมาณ
content-box

กำหนดรูปที่มีขอบเขตโดยขอบเขตของเนื้อหา

รัศมีของมุมของกล่องนี้เท่า 0 หรือค่าใหญ่ที่สุดของ border-radius - border-width - padding
basic-shape พื้นที่หลุดภาพซึ่งมีฐานที่เป็นรูปที่กำหนดโดยฟังก์ชัน inset() หรือ circle() หรือ ellipse() หรือ polygon()
url(image) พื้นที่หลุดภาพซึ่งมีฐานที่เป็นช่องว่าง alpha ของภาพที่กำหนดโดย shape-image-threshold
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น. ดู initial.
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของมัน. ดู inherit.

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

ค่าเริ่มต้น: none
การสืบทอด: ไม่
การสร้างแอนิเมชัน: yes สำหรับ basic-shape. อ่านเกี่ยวกับ animatable
รุ่น: CSS Shapes Module Level 1
ระบบการเขียนเอกสารจาวาสคริปต์: object.style.shapeOutside="circle(50%)"

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

ตัวเลขในตารางนี้แสดงรุ่นเบราเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่

เชิร์น เอดจ์ ไฟร็อกซ์ แซฟารี่ โอเปร่า
37 79 62 10.1 24