Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Thuộc tính CSS border-image-slice

Giới thiệu

Thuộc tính border-image-slice chia hình ảnh nguồn thành 9 vùng (9-slice scaling): 4 góc, 4 cạnh, 1 giữa. Đây là thuộc tính quan trọng nhất để border-image hiển thị đúng mong đợi.

Cơ chế 9-slice

     slice-top
  ┌─────────┬─────────┬─────────┐
  │  TL     │   T     │  TR     │ ← top edge (lặp/kéo)
slice-left │         │slice-   │
  │  ML     │  CENTER │  MR     │ ← middle (mặc định BỎ QUA)
slice-right│         │slice-   │
  │  BL     │   B     │  BR     │ ← bottom edge
  └─────────┴─────────┴─────────┘
     slice-bottom
     
TL=Top-Left, TR=Top-Right, BL=Bottom-Left, BR=Bottom-Right
T=Top edge, B=Bottom edge, L=Left edge, R=Right edge
CENTER=Middle (bỏ qua trừ khi có 'fill')

Cú pháp

border-image-slice: [<number> | <percentage>]{1,4} && fill?;

Ví dụ: border-image-slice: 50

<!DOCTYPE html>
<html>
<head>
  <style>
    #borderimg1 {
      border: 15px solid transparent;
      padding: 15px;
      border-image-source: url(https://tutorialspoint.com/css/images/border.png);
      border-image-repeat: round;
      border-image-slice: 50;  /* Cắt 50px (hoặc 50%) từ 4 cạnh */
    }
  </style>
</head>
<body>
  <p id="borderimg1">Border image slice = 50</p>
</body>
</html>

1-4 giá trị slice

/* 1 giá trị: 4 cạnh cắt đều */
border-image-slice: 30;

/* 2 giá trị: top/bottom | left/right */
border-image-slice: 20 40;

/* 3 giá trị: top | left/right | bottom */
border-image-slice: 10 30 20;

/* 4 giá trị: top | right | bottom | left */
border-image-slice: 10 20 30 40;

Từ khóa fill — Giữ vùng giữa

/* Mặc định: vùng giữa bị bỏ qua (transparent) */
border-image-slice: 30;

/* Giữ vùng giữa hiển thị như background */
border-image-slice: 30 fill;

/* Kết hợp với background-color */
.box {
  background: #f0f0f0;
  border-image-slice: 30 fill;
  /* Vùng giữa border-image sẽ đè lên background */
}

Đơn vị: Number vs Percentage

Đơn vịÁp dụng choVí dụ
<number>Raster image (PNG, JPG, GIF)30 = 30px từ cạnh
<percentage>Vector image (SVG) / tất cả30% = 30% kích thước ảnh

Mẹo thiết kế border image

  • Thiết kế ảnh nguồn: 4 góc không thay đổi, 4 cạnh có thể lặp/kéo, giữa để trống hoặc pattern
  • Dùng round cho repeat → tự co dãn vừa khít, không cắt ngang pattern
  • Kết hợp border-image-width để điều chỉnh độ dày hiển thị
  • Test với nhiều kích thước container khác nhau