Xác định vùng vẽ nền với CSS background-clip

Thuộc tính background-clip trong CSS

Thuộc tính background-clip xác định vùng vẽ của nền (background painting area), tức là nền sẽ hiển thị đến đâu so với viền (border), padding và nội dung (content) của phần tử.

Các giá trị chính

Giá trị	Mô tả
`border-box`	Nền vẽ ra đến cạnh ngoài của viền (mặc định)
`padding-box`	Nền vẽ đến cạnh trong của viền (không bao phủ viền)
`content-box`	Nền chỉ vẽ trong vùng nội dung (không bao phủ padding)
`text`	Nền chỉ vẽ ở vị trí văn bản (cần `background-clip: text` và `color: transparent`)

Ví dụ thực hành

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo {
      border: 5px dashed red;
      padding: 20px;
      background: orange;
      background-clip: padding-box; /* Nền không bao phủ viền đỏ */
    }
  </style>
</head>
<body>
  <div id="demo">
    <h1>www.tutorialspoint.com</h1>
    <p>Với background-clip: padding-box, màu cam sẽ không hiển thị bên dưới viền đỏ nét đứt. Thử thay đổi giá trị thành border-box hoặc content-box để thấy sự khác biệt.</p>
  </div>
</body>
</html>

Ứng dụng thực tế

Thuộc tính này rất hữu ích khi bạn muốn tạo hiệu ứng viền trong suốt hoặc gradient border, kết hợp với background-origin để kiểm soát vị trí bắt đầu của hình nền.