คุณสมบัติ CSS background-clip: ควบคุมพื้นที่วาดพื้นหลัง

คุณสมบัติ background-clip

คุณสมบัติ background-clip ใช้ประกาศพื้นที่ที่พื้นหลังจะถูกวาด (painting area) คล้ายกับบทความก่อนหน้าแต่เน้นการใช้งานจริง

ค่าที่ใช้ได้

ค่า	พื้นที่ที่วาด
`border-box`	ครอบคลุมถึงขอบด้านนอก (default)
`padding-box`	ครอบคลุมถึง padding (ไม่รวม border)
`content-box`	ครอบคลุมเฉพาะเนื้อหา (ไม่รวม padding, border)
`text`	ตัดให้เหลือรูปร่างตัวอักษร (ต้องใช้ prefix -webkit-)

ตัวอย่าง: padding-box

<html>
<head>
  <style>
    #demo {
      border: 5px dashed red;
      padding: 10px;
      background: orange;
      background-clip: padding-box;
    }
  </style>
</head>
<body>
  <div id="demo">
    <h1>www.tutorialspoint.com</h1>
    <p>พื้นหลังสีส้มจะหยุดที่ขอบ padding ไม่ทับขอบสีแดง...</p>
  </div>
</body>
</html>

การประยุกต์ใช้: Text Gradient

.gradient-text {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 4rem;
  font-weight: 800;
}

เทคนิคนี้ได้รับความนิยมมากในการออกแบบหัวข้อเว็บไซต์สมัยใหม่