การควบคุมการตัดส่วนที่เกิน

แม้ว่า overflow: hidden จะเป็น "เครื่องมือที่ไม่มีความยืดหยุ่น" ซึ่งมักจะตัดเนื้อหาอย่างเคร่งครัดที่ padding-box แต่ overflow: clip ที่รวมกับ overflow-clip-margin จะเป็น "เครื่องมือที่ยืดหยุ่น" สำหรับการควบคุมเลย์เอาต์แบบละเอียดในคอนเทนเนอร์บล็อก

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

องค์ประกอบที่ถูกแทนที่ (<img>, <video>, <canvas> ฯลฯ) จะมีค่าเริ่มต้นเป็น overflow: clip และ overflow-clip-margin: content-box ซึ่งช่วยให้คุณควบคุมการรวมรูปภาพที่ใช้ object-fit หรือ border-radius ได้อย่างเป็นระเบียบ

วิธีการนำไปใช้งาน

1. ใช้ overflow: clip: ตรวจสอบว่าองค์ประกอบเป้าหมายเปิดใช้ overflow: clip แล้ว การตั้งค่า overflow: clip เป็นสิ่งจำเป็นในคอนเทนเนอร์เลย์เอาต์บล็อกเพื่อให้ overflow-clip-margin มีผล หากตั้งค่า overflow เป็น hidden, auto หรือ scroll เบราว์เซอร์จะละเว้นพร็อพเพอร์ตี้ overflow-clip-margin overflow: clip ป้องกันการเลื่อนทั้งหมด (ทั้งที่ผู้ใช้เริ่มและแบบเป็นโปรแกรมผ่าน JavaScript)
2. จัดแนวให้ตรงกับขอบกล่อง: ใช้คีย์เวิร์ดเพื่อจัดแนวขอบเขตการคลิปให้ตรงกับขอบโมเดลกล่องด้านในอย่างแม่นยำ ดังนี้
   • content-box: ตัดเนื้อหาตรงจุดที่พื้นที่เนื้อหาเริ่มต้น โดยปล่อยให้พื้นที่ระยะห่างจากขอบว่างเปล่าทั้งหมด เนื้อหาจะหยุดที่ขอบของระยะห่างจากขอบพอดี เหมาะอย่างยิ่งสำหรับโมดูลเลย์เอาต์ที่ซ้อนกัน
   • padding-box (ค่าเริ่มต้น): ตัดเนื้อหาที่ขอบด้านในของเส้นขอบ
   • border-box: ตัดเนื้อหาที่ขอบด้านนอกของเส้นขอบ เพื่อให้เนื้อหาอยู่ใต้หรือซ้อนทับเส้นขอบโปร่งแสงบางส่วน
3. กำหนดออฟเซ็ตที่ระบุ (ระยะตัดตก): ระบุค่าความยาว (เช่น 15px หรือ 5px) เพื่อสร้างโซนปลอดภัยก่อนตัดพิกเซล ซึ่งจะช่วยให้เงาขององค์ประกอบย่อยที่โดดเด่นแสดงผลโดยไม่ถูกตัดขอบเขตโดยไม่ต้องขยายเรขาคณิตของเลย์เอาต์
4. รวมขอบกล่องและออฟเซ็ต: ระบุทั้งขอบกล่องและออฟเซ็ตความยาวพร้อมกัน (เช่น content-box 15px) เพื่อออฟเซ็ตจากขอบกล่องที่เฉพาะเจาะจง

โค้ดตัวอย่าง

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

คอนเทนเนอร์บล็อก: เส้นโค้งมนที่ซ้อนกัน

• ใช้ overflow-clip-margin: content-box กับคอนเทนเนอร์หลักที่มีมุมโค้งมนและระยะห่างจากขอบที่กำหนดเอง
• ใช้มุมโค้งมนที่คล้ายกันกับคอมโพเนนต์สื่อย่อยและส่วนท้ายด้านในตามขอบเขตกล่องเนื้อหาด้านในที่มีจุดศูนย์กลางร่วมกัน ซึ่งจะช่วยแก้ปัญหาเส้นโค้งที่ซ้อนกันอย่างไม่เหมาะสมโดยไม่ต้องใช้ตรรกะ calc() ที่กำหนดเอง

<div class="nested-curve-parent">
  <img src="avatar.jpg" alt="Nested Curve Demo">
  <div class="nested-curve-footer">Card Footer</div>
</div>

/**
 * Standard block layout container with outer corner radii and padding.
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.nested-curve-parent {
  /* Level 1 Fallback: clips child roughly at the padding box */
  overflow: hidden;
}

/* Inner footer component with 12px rounded to visually demonstrate automatic concentric corner clipping */
.nested-curve-footer {
  background: #111;
  color: #fff;
}

@supports (overflow-clip-margin: content-box) {
  .nested-curve-parent {
    /* MANDATORY: overflow: clip is required on non-replaced elements */
    overflow: clip;
    /* Automatically curves clipping edge to match inner content-box radius */
    overflow-clip-margin: content-box;
  }
}

คอนเทนเนอร์บล็อก: เงาขององค์ประกอบย่อยที่เกินออกมา

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

<div class="safety-zone-parent">
  <h4>Clipped Container</h4>
  <p>Inner content boundaries safely contained.</p>
  <!-- Child button element positioned inside with a prominent shadow -->
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * Standard block layout container clipping inner content.
 * Base fallback uses overflow: hidden, which abruptly slices child element shadows.
 */
.safety-zone-parent {
  /* Level 1 Fallback: clips overflowing content but truncates child shadows */
  overflow: hidden;
}

/* Child button element positioned inside with an expanded shadow */
.demo-glowing-btn {
  display: block;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.7);
}

@supports (overflow-clip-margin: 15px) {
  .safety-zone-parent {
    overflow: clip;
    /* Establishes a visible safety zone allowing child element shadows to render safely outside */
    overflow-clip-margin: 15px;
  }
}

การนำไปใช้เชิงกลยุทธ์และแนวทางปฏิบัติแนะนำ

• ควรใช้ overflow: clip กับองค์ประกอบเป้าหมายเมื่อใช้ overflow-clip-margin เนื่องจากการตั้งค่า overflow เป็น clip อย่างเคร่งครัดเป็นสิ่งจำเป็นในคอนเทนเนอร์เลย์เอาต์บล็อกมาตรฐานเพื่อเปิดใช้งานระยะขอบคลิปโค้งที่กำหนดเองหรือด้านใน
• ควรตั้งค่า overflow-clip-margin: content-box ในคอนเทนเนอร์ที่มีระยะห่างจากขอบซึ่งมีมุมโค้งมนเพื่อตัดองค์ประกอบย่อยภายในที่ไม่โค้งมนให้เป็นเส้นโค้งขอบที่ซ้อนกันอย่างสมบูรณ์แบบทางคณิตศาสตร์โดยอัตโนมัติ โดยไม่ต้องใช้ตรรกะการลบระยะห่างจากขอบด้วยตนเอง
• ควรกำหนดค่า overflow-clip-margin ด้วยออฟเซ็ตความยาวที่ระบุเมื่อใช้เอฟเฟกต์ภาพภายนอก (เช่น filter: drop-shadow()) เพื่อป้องกันไม่ให้กรอบล้อมรอบถูกตัดออกอย่างกะทันหันโดยไม่ต้องแก้ไขหรือขยายเรขาคณิตของเลย์เอาต์
• อย่าใช้ overflow: clip หากคอนเทนเนอร์ต้องใช้การจัดการการเลื่อนแบบเป็นโปรแกรมผ่าน JavaScript หรือทำหน้าที่เป็นบริบทเลย์เอาต์ทันทีสำหรับองค์ประกอบ position: sticky เนื่องจาก clip จะปิดใช้การเลื่อนโดยสมบูรณ์

กลยุทธ์สำรอง

สำหรับสภาพแวดล้อมเป้าหมายที่ไม่มีการรองรับ overflow: clip หรือ overflow-clip-margin โดยตรง กลยุทธ์สำรองแบบการเพิ่มประสิทธิภาพแบบต่อเนื่องจะขึ้นอยู่กับความตั้งใจด้านภาพโดยตรง ดังนี้

• เปลี่ยนไปใช้ overflow: hidden เป็นประสบการณ์การใช้งานพื้นฐานเพื่อรับประกันว่าระบบจะรักษาขอบเขตหลักไว้
• ใช้ overflow: visible เป็นทางเลือกสำรองในองค์ประกอบที่ต้องไม่ตัดเงาตกกระทบหรือป้ายมุมด้านนอกออก

ใช้การเพิ่มประสิทธิภาพแบบต่อเนื่องเป็นทางเลือกสำรองให้เสร็จสมบูรณ์

<!-- 1. Nested rounded edges fallback -->
<div class="demo-container-fallback">
  <img src="example.jpg" alt="Nested Curve Fallback">
  <div class="demo-footer-fallback">Footer</div>
</div>

<!-- 2. Child element shadow bleed fallback -->
<div class="demo-safety-parent">
  <h4>Container</h4>
  <p>Inner boundaries contained.</p>
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * 1. Block Container Nested Curves Fallback
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.demo-container-fallback {  
  /* Level 1 Fallback: clip child roughly at padding box */
  overflow: hidden;
}

.demo-container-fallback img {
  object-fit: cover;
  display: block;
}

@supports (overflow-clip-margin: content-box) {
  .demo-container-fallback {
    overflow: clip;
    overflow-clip-margin: content-box;
  }
}

/**
 * 2. Child Element Shadow Bleed Fallback
 * Base fallback clips content using overflow: hidden, abruptly truncating child element shadows.
 */
.demo-safety-parent {  
  /* Level 1 Fallback */
  overflow: hidden;
}

.demo-glowing-btn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: #e52e71;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.65);
}

@supports (overflow-clip-margin: 15px) {
  .demo-safety-parent {
    overflow: clip;
    overflow-clip-margin: 15px;
  }
}