เส้นทาง รูปร่าง การตัด และการมาสก์

การแสดงผล HTML สร้างขึ้นบนโมเดลกล่อง แต่ชีวิต (และการออกแบบเว็บ) มีอะไรมากกว่าสี่เหลี่ยมผืนผ้า CSS รองรับหลายวิธีในการเปลี่ยนพื้นที่ขององค์ประกอบที่จะแสดงผล ซึ่งช่วยให้นักพัฒนาแอปมีอิสระในการสร้างดีไซน์ที่รองรับรูปร่างและขนาดทั้งหมด การตัดช่วยให้ใช้รูปทรงเรขาคณิตได้ ในขณะที่การมาสก์จะส่งผลต่อการมองเห็นที่ระดับพิกเซล

เส้นทางและรูปร่าง

CSS ใช้ฟังก์ชันเพื่อกำหนดรูปร่าง เราจะกล่าวถึงข้อมูลทั่วไปเกี่ยวกับฟังก์ชันในโมดูลฟังก์ชัน CSS ในส่วนนี้ คุณจะได้เรียนรู้วิธีสร้างรูปร่างใน CSS ตัวอย่างต่อไปนี้ทั้งหมดใช้รูปร่างที่คุณสร้างด้วยพร็อพเพอร์ตี้ clip-path ซึ่งจะลดพื้นที่ที่มองเห็นได้ให้เหลือเฉพาะสิ่งที่อยู่ภายในรูปร่าง ซึ่งจะช่วยให้องค์ประกอบแตกต่างจากกล่องขององค์ประกอบในเชิงภาพ เราจะอธิบายการตัดอย่างละเอียดในภายหลัง

รูปร่างที่กำหนดใน CSS อาจเป็นรูปร่างพื้นฐาน (เช่น วงกลม สี่เหลี่ยมผืนผ้า และรูปหลายเหลี่ยม) หรือเส้นทาง (ซึ่งกำหนดรูปร่างที่ซับซ้อนและรูปร่างผสมได้)

รูปร่างพื้นฐาน

circle() และ ellipse()

ฟังก์ชัน circle() และ ellipse() จะกำหนดรูปร่างวงกลมและวงรีที่มีรัศมีที่สัมพันธ์กับองค์ประกอบ ฟังก์ชัน circle() รับขนาดหรือเปอร์เซ็นต์เดียวเป็นอาร์กิวเมนต์ โดยค่าเริ่มต้น ฟังก์ชันทั้ง 2 จะวางรูปร่างเทียบกับกึ่งกลางขององค์ประกอบ ทั้ง 2 รูปแบบยอมรับตำแหน่งที่ไม่บังคับหลังat คีย์เวิร์ด ซึ่งแสดงเป็นความยาว เปอร์เซ็นต์ หรือคีย์เวิร์ดตามตำแหน่งได้

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: circle(50%);
}

ตัวอย่างก่อนหน้าแสดงเส้นทางการตัดแบบวงกลมโดยใช้ฟังก์ชัน circle() โปรดทราบว่ารัศมี 50% จะสร้างวงกลมที่มีความกว้างเต็มขององค์ประกอบ ฟังก์ชัน ellipse() รับอาร์กิวเมนต์ 2 รายการที่แสดงถึงรัศมีแนวนอนและแนวตั้งของรูปร่าง

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25%);
}

ตัวอย่างก่อนหน้าแสดงเส้นทางการตัดรูปวงรีโดยใช้ฟังก์ชัน ellipse() โปรดทราบว่ารัศมี 50% จะสร้างวงรีที่มีความกว้างเต็มขององค์ประกอบ ตัวอย่างต่อไปนี้แสดงวงรีเดียวกันซึ่งวางตำแหน่งโดยมีจุดศูนย์กลางอยู่ที่ด้านบนขององค์ประกอบ

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25% at center top);
}

rect() และ inset()

ฟังก์ชัน rect() และ inset() จะให้วิธีต่างๆ ในการกำหนดสี่เหลี่ยมผืนผ้าโดยการตั้งค่าตำแหน่งของด้านต่างๆ ที่สัมพันธ์กับด้านขององค์ประกอบ ซึ่งช่วยให้คุณสร้างสี่เหลี่ยมผืนผ้าที่แตกต่างจากกล่องเริ่มต้นขององค์ประกอบได้ โดยอาจยอมรับคีย์เวิร์ด round เพื่อสร้างสี่เหลี่ยมผืนผ้าที่มีมุมโค้งได้ โดยใช้ไวยากรณ์เดียวกันกับพร็อพเพอร์ตี้แบบย่อ border-radius

ฟังก์ชัน rect() จะกำหนดตำแหน่งของด้านบนและด้านล่างของสี่เหลี่ยมผืนผ้าที่สัมพันธ์กับขอบด้านบนขององค์ประกอบ และด้านซ้ายและด้านขวาที่สัมพันธ์กับขอบด้านซ้ายขององค์ประกอบ ฟังก์ชันนี้รับหน่วยขนาดหรือเปอร์เซ็นต์ 4 หน่วยเป็นอาร์กิวเมนต์ที่กำหนดด้านบน ขวา ล่าง และซ้าย คุณอาจเลือกฟังก์ชัน rect() เมื่อต้องการสี่เหลี่ยมผืนผ้าที่ไม่ปรับขนาดเมื่อขนาดขององค์ประกอบเปลี่ยนแปลง หรือสี่เหลี่ยมผืนผ้าที่รักษาสัดส่วนเดิมไว้เมื่อองค์ประกอบเปลี่ยนแปลง

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: rect(15px 75px 45px 10px);
}

ตัวอย่างก่อนหน้าแสดงเส้นทางการตัดสี่เหลี่ยมผืนผ้าที่กำหนดโดยใช้ฟังก์ชัน rect() มิติข้อมูลจะสัมพันธ์กับขอบด้านบนและด้านซ้ายขององค์ประกอบตามที่แสดงในแผนภาพ

ฟังก์ชัน inset() จะกำหนดตำแหน่งของด้านต่างๆ ของสี่เหลี่ยมผืนผ้าตามระยะทางที่เข้ามาจากแต่ละด้านขององค์ประกอบ ฟังก์ชันนี้รับหน่วยขนาดหรือเปอร์เซ็นต์ 1-4 หน่วยเป็นอาร์กิวเมนต์ ซึ่งช่วยให้คุณกำหนดหลายด้านได้พร้อมกัน คุณอาจเลือกฟังก์ชัน inset() เมื่อต้องการสี่เหลี่ยมผืนผ้าที่ปรับขนาดตามองค์ประกอบ หรือสี่เหลี่ยมผืนผ้าที่มีระยะห่างคงที่จากขอบขององค์ประกอบ

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px);
}

ตัวอย่างก่อนหน้าแสดงเส้นทางการตัดสี่เหลี่ยมผืนผ้าที่กำหนดโดยใช้ฟังก์ชัน inset() โดยขนาดจะสัมพันธ์กับด้านข้างขององค์ประกอบ

ฟังก์ชัน rect() และ inset() จะยอมรับคีย์เวิร์ด round (ไม่บังคับ) เพื่อสร้างสี่เหลี่ยมผืนผ้าที่มีมุมโค้ง โดยใช้ไวยากรณ์เดียวกันกับพร็อพเพอร์ตี้ย่อ border-radius ตัวอย่างต่อไปนี้แสดงสี่เหลี่ยมผืนผ้าที่แสดงก่อนหน้านี้ในเวอร์ชันโค้งมน

.rounded-rect {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

.rounded-inset {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

polygon()

สำหรับรูปร่างอื่นๆ เช่น สามเหลี่ยม ห้าเหลี่ยม ดาว ฯลฯ ฟังก์ชัน polygon() จะช่วยให้คุณสร้างรูปร่างได้โดยการเชื่อมต่อหลายจุดด้วยเส้นตรง ฟังก์ชัน polygon() จะยอมรับรายการคู่ที่ประกอบด้วยหน่วยความยาวหรือเปอร์เซ็นต์ 2 หน่วย แต่ละคู่จะอธิบายจุดบนรูปหลายเหลี่ยม โดยค่าแรกคือระยะห่างจากขอบด้านซ้ายขององค์ประกอบ ส่วนค่าที่ 2 คือระยะห่างจากขอบด้านบนขององค์ประกอบ คุณไม่จำเป็นต้องปิดรูปหลายเหลี่ยม เนื่องจากระบบจะปิดให้โดยเชื่อมต่อจุดสุดท้ายกับจุดแรก

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: polygon(
    50% 0,
    0 100%,
    100% 100%
  );
}

ตัวอย่างก่อนหน้าสร้างเส้นทางการตัดรูปสามเหลี่ยมโดยกำหนดจุด 3 จุด

โดยค่าเริ่มต้น ฟังก์ชัน polygon() จะแสดงพื้นที่ที่ทับซ้อนกันเป็นพื้นที่ที่เติมสี คุณเปลี่ยนลักษณะการทำงานนี้ได้โดยใช้อาร์กิวเมนต์แรกที่ไม่บังคับซึ่งเรียกว่ากฎการเติม หากต้องการสลับระหว่างพื้นที่ที่เติมสีกับพื้นที่ที่ไม่ได้เติมสี ให้ตั้งกฎการเติมสีเป็น evenodd หากต้องการใช้กฎการเติมเริ่มต้น ให้ตั้งค่าเป็น nonzero

ตัวอย่างก่อนหน้าแสดงpolygon()ฟังก์ชันที่มีฟังก์ชันตรีโกณมิติเพื่อสร้างรูปหลายเหลี่ยมปกติและรูปดาว ซึ่งไม่ได้สร้างรูปหลายเหลี่ยมปกติที่ใหญ่ที่สุดเท่าที่จะเป็นไปได้ซึ่งพอดีกับภายในองค์ประกอบหรือจัดกึ่งกลาง เราจะปล่อยให้คุณลองทำเอง รูปดาวในตัวอย่างนี้ยังแสดงกฎการเติม nonzero และ evenodd ด้วย

รูปร่างที่ซับซ้อน

เมื่อฟังก์ชันรูปร่างพื้นฐานไม่เพียงพอที่จะอธิบายรูปร่างที่ซับซ้อน CSS จะมีฟังก์ชันที่ใช้ไวยากรณ์ที่ซับซ้อนกว่าเพื่ออธิบายฟีเจอร์ต่างๆ เช่น เส้นโค้งและเส้นตรง ฟังก์ชันเหล่านี้ยังมีประโยชน์สำหรับรูปร่างแบบผสม (รูปร่างที่ประกอบด้วยรูปร่างหลายรูปร่าง เช่น วงกลมที่มีรูตรงกลาง)

path()

ฟังก์ชัน path() ยอมรับสตริงของไวยากรณ์เส้นทาง SVG เพื่ออธิบายรูปร่าง ซึ่งช่วยให้สร้างรูปร่างที่ซับซ้อนได้โดยใช้คำสั่งที่อธิบายเส้นและเส้นโค้งที่ประกอบกันเป็นรูปร่าง การแก้ไขไวยากรณ์ SVG โดยตรงอาจซับซ้อน เราจึงขอแนะนำให้พิจารณาใช้โปรแกรมแก้ไขภาพเฉพาะที่สามารถส่งออกไวยากรณ์เมื่อสร้างรูปร่างด้วยฟังก์ชัน path()

ฟังก์ชัน path() ไม่ได้ใช้หน่วยการกำหนดขนาด CSS และระบบจะตีความค่าทั้งหมดเป็นพิกเซล ซึ่งหมายความว่ารูปร่างที่สร้างด้วยฟังก์ชันเส้นทางจะไม่ตอบสนองต่อขนาดขององค์ประกอบหรือคอนเทนเนอร์ เราขอแนะนำให้ใช้ path() เฉพาะกับรูปร่างที่มีขนาดคงที่

shape()

ฟังก์ชัน shape() ใช้ไวยากรณ์คำสั่งเพื่ออธิบายรูปร่าง ซึ่งคล้ายกับฟังก์ชัน path() อย่างไรก็ตาม คำสั่งฟังก์ชัน shape() เป็น CSS ดั้งเดิมและใช้หน่วยขนาด CSS ได้ ซึ่งจะช่วยให้ปรับขนาดรูปร่างที่กำหนดโดยใช้ฟังก์ชัน shape() ได้อย่างตอบสนอง

ตัวอย่างก่อนหน้าใช้ฟังก์ชัน path() และ shape() เพื่อกำหนดรูปร่างหัวใจและวงกลมที่มีรูตรงกลาง ตัวอย่างใช้ค่าเดียวกันในหน่วยพิกเซลสำหรับทั้ง 2 ฟังก์ชัน แต่ฟังก์ชัน shape() อาจใช้หน่วยขนาด CSS อื่นๆ เช่น เปอร์เซ็นต์หรือหน่วยสัมพัทธ์ของคอนเทนเนอร์ได้เช่นกัน

การตัด

การตัดจะกำหนดพื้นที่ขององค์ประกอบที่มองเห็นได้ ซึ่งคล้ายกับการตัดรูปภาพจากนิตยสาร พร็อพเพอร์ตี้ clip-path จะตั้งค่าเส้นทางที่ใช้กำหนดพื้นที่คลิป

ดังที่เห็นในตัวอย่างในส่วนก่อนหน้า คุณสามารถใช้ฟังก์ชันรูปร่างหรือเส้นทางพื้นฐานใดก็ได้เป็น clip-path พร็อพเพอร์ตี้ clip-path ยังรองรับเส้นทางที่กำหนดไว้ในองค์ประกอบ clipPath ของ SVG ซึ่งอาจฝังไว้หรืออยู่ในไฟล์แยกต่างหากก็ได้

แผนภาพก่อนหน้าแสดงให้เห็นว่าการเพิ่ม clip-path ลงในองค์ประกอบรูปภาพจะเปลี่ยนพื้นที่ที่มองเห็นได้ของรูปภาพอย่างไร เส้นทางการตัดส่วนบนใช้ฟังก์ชัน circle() ส่วนเส้นทางการตัดส่วนล่างใช้ SVG clipPath โปรดทราบว่าวงกลมที่สร้างขึ้นโดยใช้ฟังก์ชัน circle() จะอยู่ตรงกลางองค์ประกอบโดยค่าเริ่มต้น

clip-path พร็อพเพอร์ตี้ยอมรับได้เพียงเส้นทางเดียว หากต้องการตัดองค์ประกอบที่มีหลายรูปร่างซึ่งไม่ทับซ้อนกัน ให้ใช้ฟังก์ชัน path() หรือ shape() เพื่อกำหนดเส้นทางแบบผสม หรือใช้ SVG clipPath อีกทางเลือกหนึ่งสำหรับสถานการณ์ที่ซับซ้อนคือการใช้การมาสก์แทนการครอบตัด ซึ่งเราจะกล่าวถึงในส่วนถัดไป

การมาสก์ด้วยรูปร่าง

หากต้องการตัดโดยใช้ฟังก์ชันรูปร่างหรือเส้นทางพื้นฐาน ให้ตั้งค่าพร็อพเพอร์ตี้ clip-path เป็นค่าที่ฟังก์ชันแสดงผล ดังตัวอย่างก่อนหน้า แต่ละฟังก์ชันจะวางรูปร่างการครอบตัดแตกต่างกันเมื่อเทียบกับองค์ประกอบ ดังนั้นโปรดดูข้อมูลอ้างอิงสำหรับแต่ละฟังก์ชัน

ในตัวอย่างก่อนหน้า องค์ประกอบ 2 รายการมี clip-path แบบวงกลมที่ใช้คลาส .clipped โปรดทราบว่า clip-path จะอยู่ในตำแหน่งที่สัมพันธ์กับแต่ละองค์ประกอบ และข้อความภายใน clip-path จะไม่ปรับให้เข้ากับรูปร่าง

กล่องอ้างอิงของเส้นทางการตัด

โดยค่าเริ่มต้น เส้นทางการตัดสำหรับองค์ประกอบจะรวมถึงเส้นขอบขององค์ประกอบ เมื่อใช้ฟังก์ชันรูปร่างพื้นฐานอย่างใดอย่างหนึ่ง คุณจะตั้งค่ากล่องอ้างอิงของ clip-path ให้รวมเฉพาะพื้นที่ขององค์ประกอบภายในเส้นขอบได้ ค่าที่ใช้ได้สำหรับกรอบอ้างอิงคือ stroke-box (ค่าเริ่มต้น) และ fill-box (เพื่อรวมเฉพาะพื้นที่ภายในเส้นขอบ)

ตัวอย่างก่อนหน้าแสดงองค์ประกอบที่มี20px (เส้นขอบ) ขนาดใหญ่ ซึ่งแต่ละองค์ประกอบใช้ฟังก์ชัน inset() เพื่อตั้งค่า clip-path องค์ประกอบที่คลิปเทียบกับเส้นขอบขององค์ประกอบจะยังคงแสดงส่วนหนึ่งของเส้นขอบ องค์ประกอบที่คลิปเทียบกับพื้นที่ภายในเส้นขอบจะไม่แสดงเส้นขอบและมีขนาดเล็กลง แม้จะมีค่าระยะขอบภายในเดียวกันก็ตาม

การตัดต่อด้วยกราฟิก

คุณอาจกำหนดเส้นทางการตัดในเอกสาร SVG ได้ ไม่ว่าจะฝังไว้ในเอกสาร HTML หรืออ้างอิงจากภายนอก ซึ่งอาจมีประโยชน์ในการกำหนดเส้นทางการตัดที่ซับซ้อนซึ่งสร้างขึ้นในโปรแกรมกราฟิก หรือเส้นทางการตัดที่รวมรูปร่างหลายรายการ

<img id="kitten" src="kitten.png">

<svg>
  <defs>
    <clipPath id="kitten-clip-shape">
      <circle cx="130" cy="175" r="100" />
    </clipPath>
  </defs>
</svg>

<style>
  #kitten {
    clip-path: url(#kitten-clip-shape);
  }
</style>

ในตัวอย่างก่อนหน้า ระบบจะใช้ clipPath ที่มี id เป็น kitten-clip-shape กับองค์ประกอบ <img> ในกรณีนี้ ระบบจะฝังเอกสาร SVG ไว้ใน HTML หากเอกสาร SVG เป็นไฟล์ภายนอกชื่อ kitten-clipper.svg ระบบจะอ้างอิง clipPath เป็น url(kitten-clipper.svg#kitten-clip-shape) แทน

การมาสก์

การมาสก์เป็นอีกวิธีหนึ่งในการกำหนดว่าจะแสดงหรือซ่อนพื้นที่ใดขององค์ประกอบ การมาสก์จะใช้พิกเซลจากรูปภาพหรือการไล่ระดับสีเพื่อกำหนดระดับการมองเห็น ในขณะที่การครอบตัดจะใช้รูปร่างหรือเส้นทางพื้นฐาน การมาสก์ช่วยให้พื้นที่ขององค์ประกอบมีความโปร่งใสบางส่วนได้ ซึ่งต่างจากการมาสก์แบบคลิป คุณอาจใช้รูปภาพมาสก์หลายรูปกับองค์ประกอบเพื่อสร้างเอฟเฟกต์ต่างๆ

หากต้องการใช้มาสก์ ให้ตั้งค่าพร็อพเพอร์ตี้ mask-image พร็อพเพอร์ตี้นี้ยอมรับรูปภาพ การไล่ระดับสี หรือการอ้างอิงไปยังองค์ประกอบ <mask> อย่างน้อย 1 รายการในเอกสาร SVG คุณใช้รูปภาพมาสก์หลายรูปได้โดยคั่นด้วยคอมมา

.my-element {
  mask-image: url(my-mask.png),
              linear-gradient(black 0%, transparent 100%);
}

ในตัวอย่างก่อนหน้า .my-element จะมาสก์โดยใช้รูปภาพ PNG ตามด้วยการไล่ระดับสีเชิงเส้น ระบบจะเพิ่มมาสก์หลายรายการเข้าด้วยกันโดยค่าเริ่มต้นเพื่อสร้างมาสก์สุดท้าย

ตัวอย่างก่อนหน้าแสดงรูปภาพที่มีการใช้มาสก์อย่างน้อย 1 รายการ สลับมาสก์แต่ละรายการเพื่อดูว่ามาสก์ต่างๆ จะรวมกันเพื่อสร้างเอฟเฟกต์สุดท้ายได้อย่างไร

การมาสก์อัลฟ่าเทียบกับการมาสก์ความสว่าง

คุณใช้มาสก์ได้โดยใช้alphaหรือluminanceของรูปภาพ เมื่อมาสก์ตาม alpha ระบบจะใช้ความโปร่งใสของแต่ละพิกเซลในรูปภาพมาสก์กับองค์ประกอบ โดยไม่สนใจข้อมูลสีของพิกเซลนั้น เมื่อมาสก์ตาม luminance ระบบจะใช้ทั้งความโปร่งใสและค่าของแต่ละพิกเซล (ความสว่างหรือความมืด) กับองค์ประกอบ การมาสก์ตามความสว่างจะถือว่าสีที่สว่างกว่ามองเห็นได้และสีที่เข้มกว่ามองไม่เห็น

หากต้องการตั้งค่าโหมดการมาสก์ ให้ใช้พร็อพเพอร์ตี้ mask-mode โดยค่าเริ่มต้น พร็อพเพอร์ตี้ mask-mode จะตั้งค่าเป็น match-source ซึ่งจะตั้งค่าโหมดตามประเภทของรูปภาพมาสก์ สำหรับรูปภาพและไล่ระดับสี ค่านี้จะเป็น alpha โดยค่าเริ่มต้น สำหรับมาสก์ SVG ค่านี้จะเป็นค่าเริ่มต้นของพร็อพเพอร์ตี้ mask-type ขององค์ประกอบ <mask> หรือ luminance หากไม่มีการกำหนด mask-type

ในตัวอย่างก่อนหน้า ระบบจะใช้รูปแบบการทดสอบที่แสดงค่าสีและค่าอัลฟ่าที่แตกต่างกันเป็นมาสก์ การสลับmask-modeจะช่วยให้คุณเห็นว่าโหมดalphaอิงตามความโปร่งใส ในขณะที่โหมดluminanceอิงตามทั้งความสว่างของสีและความโปร่งใส

พร็อพเพอร์ตี้การมาสก์เพิ่มเติม

CSS มีคุณสมบัติเพิ่มเติมเพื่อปรับแต่งลักษณะการทำงานของมาสก์ พร็อพเพอร์ตี้แต่ละรายการยอมรับรายการค่าที่คั่นด้วยคอมมา ซึ่งจะตรงกับรายการมาสก์ที่ตั้งค่าโดยพร็อพเพอร์ตี้ mask-image หากมีค่าน้อยกว่ามาสก์ รายการจะทำซ้ำจนกว่าจะมีการตั้งค่าสำหรับแต่ละมาสก์ หากมีค่ามากกว่ามาสก์ ระบบจะทิ้งค่าที่เกินออก

ชวเลขของมาสก์

คุณตั้งค่าคุณสมบัติของมาสก์หลายรายการพร้อมกันได้ด้วยรูปแบบย่อของมาสก์ ซึ่งจะช่วยให้การตั้งค่ามาสก์หลายรายการง่ายขึ้นด้วยการจัดกลุ่มพร็อพเพอร์ตี้ทั้งหมดของมาสก์แต่ละรายการไว้ด้วยกัน รูปแบบย่อของมาสก์เทียบเท่ากับการตั้งค่าพร็อพเพอร์ตี้ต่อไปนี้ตามลำดับ: mask-image, mask-mode, mask-position, mask-size, mask-repeat, mask-origin, mask-clip และ mask-composite ไม่จำเป็นต้องรวมพร็อพเพอร์ตี้ทั้งหมด และพร็อพเพอร์ตี้ที่ไม่ได้รวมจะรีเซ็ตเป็นค่าเริ่มต้น การรองรับพร็อพเพอร์ตี้สูงสุด 8 รายการต่อมาสก์จะช่วยให้มีข้อมูลอ้างอิงทั้งหมด

.longhand {
  mask-image: linear-gradient(white, black),
              linear-gradient(90deg, black, transparent);
  mask-mode: luminance, alpha;
  mask-position: bottom left, top right;
  mask-size: 50% 50%, 30% 30%;
}

.shorthand {
  mask: linear-gradient(white, black) luminance bottom left / 50% 50%,
        linear-gradient(90deg, black, transparent) alpha top right / 30% 30%;
}

ในตัวอย่างก่อนหน้า แต่ละคลาสมีการใช้มาสก์ 2 รายการ โดยแบบแรกใช้พร็อพเพอร์ตี้แต่ละรายการ ส่วนแบบที่ 2 ใช้รูปแบบย่อ mask ทั้ง 2 รูปแบบมีความหมายเหมือนกัน

ข้อความต่อเนื่องรอบองค์ประกอบที่ลอย

เมื่อคลิปหรือมาสก์องค์ประกอบ คุณจะเปลี่ยนเฉพาะพื้นที่ที่มองเห็นได้ภายในกล่องขององค์ประกอบ แต่กล่องขององค์ประกอบจะยังคงเหมือนเดิม ซึ่งหมายความว่าองค์ประกอบที่ลอยจะส่งผลต่อโฟลว์ของเอกสารตามกรอบล้อมรอบเดิม ไม่ใช่ส่วนที่มองเห็นได้ขององค์ประกอบ หากต้องการกำหนดโฟลว์รอบองค์ประกอบ ให้ใช้พร็อพเพอร์ตี้ shape-outside ร่วมกับเส้นทางการตัด

พร็อพเพอร์ตี้ shape-outside จะกำหนดรูปร่างที่เนื้อหาจะไหลรอบองค์ประกอบ รูปร่างนี้อาจเป็นฟังก์ชันรูปร่างพื้นฐานใดก็ได้ แต่ไม่ใช่รูปร่างที่กำหนดโดยใช้ฟังก์ชัน path() หรือ shape() หรือ clipPath ที่กำหนดไว้ในเอกสาร SVG

พร็อพเพอร์ตี้ shape-outside ยังยอมรับรูปภาพหรือการไล่ระดับสีด้วย เช่นเดียวกับการมาสก์ ขอบเขตของรูปร่างจะกำหนดโดยความโปร่งใสของรูปภาพหรือการไล่ระดับสี พร็อพเพอร์ตี้ shape-image-threshold จะกำหนดระดับความโปร่งใสที่ถือว่าอยู่ภายในรูปร่าง

รูปร่างในการเคลื่อนไหว

การทำให้ clip-path เคลื่อนไหว

คุณสามารถทําให้พร็อพเพอร์ตี้ clip-path เคลื่อนไหวได้โดยการผสมผสานจากรูปร่างหนึ่งไปยังอีกรูปร่างหนึ่ง คุณต้องใช้ฟังก์ชันรูปร่างเดียวกันสำหรับคีย์เฟรมแต่ละรายการเพื่อสร้างภาพเคลื่อนไหวที่ราบรื่น เมื่อใช้ฟังก์ชัน polygon() หรือ shape() คุณต้องใช้จำนวนจุดเท่ากันในแต่ละคีย์เฟรม

ในตัวอย่างก่อนหน้า clip-path ขององค์ประกอบจะเปลี่ยนรูปร่างระหว่างรูปห้าเหลี่ยมกับรูปดาวที่กำหนดโดยใช้ฟังก์ชัน polygon() ตัวอย่างนี้ใช้evenoddกฎการเติมเพื่อแสดงให้เห็นว่าจุดที่เคลื่อนไหวสร้างพื้นที่ที่ทับซ้อนกันได้อย่างไร

การสร้างภาพเคลื่อนไหวด้วยเส้นทางออฟเซ็ต

นอกจากนี้ คุณยังทำให้องค์ประกอบเคลื่อนไหวไปตามเส้นทางที่สร้างด้วยฟังก์ชันรูปร่างเหล่านี้ได้ด้วย พร็อพเพอร์ตี้ offset-path จะกำหนดรูปร่างที่จะใช้เป็นเส้นทาง และ offset-distance จะกำหนดตำแหน่งตามเส้นทางนั้น นอกจากนี้ คุณยังใช้ฟังก์ชัน ray() กับพร็อพเพอร์ตี้ offset-path เพื่อเคลื่อนไหวไปตามเส้นตรงได้ด้วย

ตัวอย่างก่อนหน้าแสดงการใช้รูปหลายเหลี่ยมเดียวกันสำหรับทั้ง clip-path และ offset-path ภาพเคลื่อนไหวใช้ offset-distance เพื่อย้ายดาวดวงเล็กๆ ไปตามรูปหลายเหลี่ยมเดียวกันกับที่ดาวดวงใหญ่ใช้เป็น clip-path

ทดสอบความเข้าใจ