ค่า CSS border-box ใน background-origin

ใช้คุณสมบัติ CSS background-origin กำหนดค่า border-box ด้วยค่านี้ รูปภาพพื้นหลังจะเริ่มจากมุมซ้ายบนของขอบ (border)

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

ลองรันโค้ดด้านล่างเพื่อทดสอบ border-box value:

<!DOCTYPE html>
<html>
<head>
  <style>
    #value1 {
      border: 3px solid blue;
      padding: 30px;
      background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
      background-repeat: no-repeat;
      background-origin: padding-box;
    }
    #value2 {
      border: 3px solid orange;
      padding: 30px;
      background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
      background-repeat: no-repeat;
      background-origin: border-box;
    }
    #value3 {
      border: 3px dashed yellow;
      padding: 30px;
      background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
      background-repeat: no-repeat;
      background-origin: content-box;
    }
  </style>
</head>
<body>
  <h1>padding-box value</h1>
  <div id="value1"><h2>Heading 2</h2><p>Demo text...</p><h3>Heading 3</h3><p>Demo text...</p></div>
  <h1>border-box value</h1>
  <div id="value2"><h2>Heading 2</h2><p>Demo text...</p><h3>Heading 3</h3><p>Demo text...</p></div>
  <h1>content-box value</h1>
  <div id="value3"><h2>Heading 2</h2><p>Demo text...</p><h3>Heading 3</h3><p>Demo text...</p></div>
</body>
</html>

สรุป: border-box เริ่มจากขอบนอกสุด (รวม border) padding-box เริ่มจากขอบ padding content-box เริ่มจากขอบ content ตัวอย่างนี้เปรียบเทียบทั้ง 3 ค่าในคราวเดียว