Thuộc tính border-image

Thuộc tính border-image đặt hình ảnh cho đường viền, nó là thuộc tính viết tắt cho các thuộc tính border-image-source, border-image-slice, border-image-repeat, border-image-width và border-image-outset. Trong đó, thuộc tính viết tắt xuất hiện trong CSS sớm hơn các thuộc tính được viết tắt và do đó được hỗ trợ trong nhiều trình duyệt cũ hơn.

Cú pháp

bộ chọn {
	border-image: url(đường dẫn tới hình ảnh) độ lệch/độ dày/độ dịch chuyển kiểu lặp lại;
}

Mô tả

Hình ảnh mà chúng ta muốn áp dụng cho đường viền cần được thiết kế một cách đặc biệt: 4 hình ảnh nhỏ cho các góc và 4 hình ảnh cho các cạnh. Ví dụ về hình ảnh như vậy:

Trong trường hợp này, phần trung tâm được để trắng (vì chúng ta không muốn nó xuất hiện trên nền của phần tử). Ví dụ về hình ảnh với phần trung tâm được điền đầy:

Giá trị slice chỉ định cho trình duyệt, phần nào của hình ảnh sẽ dùng cho các góc, còn phần nào dùng cho các cạnh (và phần nào sẽ là trung tâm). Các góc dùng 4 phần, các cạnh dùng 4 phần và một phần (trung tâm) dùng cho nền của phần tử (tùy chọn, từ khóa fill).

Hình ảnh được "cắt" thành các mảnh theo cách sau: cho giá trị slice được chỉ định từ một đến bốn giá trị. Hãy cùng phân tích với ví dụ. Giả sử các giá trị sau được chỉ định: 10 20 30 40 (pixel px không được chỉ định, điều này liên quan đến việc hình ảnh có thể là raster hoặc vector). Các giá trị nói lên điều sau: 10 cắt từ trên, 20 cắt từ phải, 30 cắt từ dưới, 40 cắt từ trái. Phần nào của hình ảnh sẽ rơi vào góc trên bên trái? Đó sẽ là mảnh: 10 từ trên, 40 từ trái. Vào góc trên bên phải sẽ rơi 10 từ trên, 20 từ phải. Và cứ thế.

Thông thường hình ảnh đối xứng (kiểu như các hình thoi ở trên) và chúng ta cần cắt các mảnh bằng nhau cho các góc. Trong trường hợp đó, một giá trị được chỉ định, giá trị này sẽ đặt các độ lệch giống nhau từ tất cả các phía. Để cắt các hình thoi màu cam, chúng ta sẽ chỉ định slice là 26 (vì hình thoi màu cam có kích thước 26px trên 26px). Các hình thoi màu vàng sẽ rơi vào các đường viền và điều sau sẽ xảy ra với chúng: chúng hoặc sẽ kéo dài ra toàn bộ khối hoặc sẽ lặp lại dọc theo đường viền (phụ thuộc vào giá trị repeat):

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Thuộc tính border-image không cho phép chỉ định độ dày của đường viền phần tử. Trình duyệt chỉ đơn giản kéo dài hình ảnh dọc theo đường viền với độ rộng đã có. Vì vậy cần đặt nó thông qua thuộc tính border.

Người dùng trình duyệt cũ (hoặc đã tắt hình ảnh) sẽ thấy khung tiêu chuẩn, được đặt trong border, vì vậy nên đặt cho nó kiểu và màu sắc phù hợp.

Giá trị

Giá trị	Mô tả
url(Đường dẫn tới hình ảnh)	Đường dẫn tới hình ảnh. Chi tiết hãy xem `border-image-source`.
độ lệch	Chỉ định cho trình duyệt, phần nào của hình ảnh sẽ dùng cho các góc, phần nào cho các cạnh (và phần nào sẽ là trung tâm). Các giá trị có thể: từ `1` đến `4` số \| từ `1` đến `4` phần trăm. Thông qua dấu cách có thể đặt từ khóa `fill` bổ sung cho các số hoặc phần trăm. Chi tiết hãy xem `border-image-slice`.
độ dày	Thuộc tính điều khiển chiều rộng phần nhìn thấy của khung, tỷ lệ nó. Nếu giá trị này lớn hơn chiều rộng `border-width`, hình ảnh khung sẽ tràn vào dưới nội dung. Các giá trị có thể: Đơn vị CSS \| phần trăm \| số \| `auto`. Chi tiết hãy xem `border-image-width`.
độ dịch chuyển	Thuộc tính thú vị, cho phép đẩy khung ra ngoài giới hạn của phần tử. Giá trị âm không được hỗ trợ. Các giá trị có thể: Đơn vị CSS (ngoại trừ % (?)) \| số dương \| auto. Chi tiết hãy xem `border-image-outset`.
kiểu lặp lại	Chỉ định cách lặp lại hình ảnh trên các đường viền (không phải trên các góc): lát hoặc kéo dãn. Các giá trị có thể: `stretch` \| `repeat` \| `round` \| `space`. Chi tiết hãy xem `border-image-repeat`.

Giá trị mặc định: none 100%/1/0 stretch (url(đường dẫn tới hình ảnh) độ lệch/độ dày/độ dịch chuyển kiểu lặp lại).

Ví dụ . border-image-repeat: giá trị repeat

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ví dụ . border-image-repeat: giá trị stretch

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ví dụ . border-image-repeat: giá trị round

Hiện tại ở trạng thái bình thường đã đặt giá trị repeat, còn khi di chuột qua - round. Hãy chú ý rằng trước khi di chuột qua trong đường viền chứa không phải số nguyên lượng hình thoi, còn sau khi di chuột qua - số nguyên. Đó chính là cách round hoạt động:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ví dụ . border-image-repeat: hai từ

Giá trị repeat cho chiều rộng và stretch cho chiều cao:

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ví dụ . Sự trùng khớp chiều rộng hình ảnh với chiều rộng đường viền

Hãy tăng border-width khi di chuột qua, trong khi đó độ dày của border-image vẫn giữ nguyên. Các hình thoi sẽ kéo dãn ra toàn bộ đường viền:

<div id="elem"></div>

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ví dụ . border-image-slice

Hãy lấy một hình ảnh khác, trong đó các mảnh khác nhau không bằng nhau:

Chỉ định, phần nào từ hình ảnh cần cắt - 25% 30% 10% 20%. Cách hoạt động của nó như sau: 25% - khoảng lùi từ trên, 30% - khoảng lùi từ phải, 10% - khoảng lùi từ dưới, 20% - khoảng lùi từ trái. Về cơ bản với các mảnh này chúng ta cắt các góc. Góc trên bên trái sẽ là 25% từ trên hình ảnh, và 20% từ trái. Góc trên bên phải sẽ là 25% từ trên hình ảnh, và 30% từ phải và cứ thế.

Ngoài ra, nếu bạn di chuột qua khối, thì từ khóa fill sẽ kích hoạt, và phần trung tâm của hình ảnh sẽ trở thành nền của khối chúng ta:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Ví dụ

Hãy tạo đường viền gradient với sự trợ giúp của gradient tuyến tính:

<div id="elem"></div>

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Ví dụ . border-image-width

Hãy đặt giá trị border-image-width thành 2 (hình ảnh đường viền sẽ trở nên lớn hơn 2 lần chính đường viền) khi di chuột qua phần tử (26/2 - đã chỉ định sau dấu gạch chéo, trong đó 26 - là giá trị của border-image-slice). Hãy chú ý rằng bản thân đường viền không tăng lên, còn hình ảnh đường viền - có, vì nó sẽ tràn vào dưới văn bản:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ví dụ . border-image-outset

Hãy đặt giá trị border-image-outset thành 3 khi di chuột qua phần tử. (26/1/2 - đã chỉ định sau dấu gạch chéo thứ hai, trong đó 26 - là giá trị của border-image-slice, còn - 1 - border-image-width):

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Xem thêm

thuộc tính border-image-source,
thuộc tính này đặt đường dẫn tới hình ảnh cho đường viền
thuộc tính border-image-slice,
thuộc tính này đặt cách chia cắt hình ảnh cho đường viền
thuộc tính border-image-repeat,
thuộc tính này đặt cách lặp lại hình ảnh cho đường viền
thuộc tính border-image-width,
thuộc tính này đặt kích thước hình ảnh cho đường viền
thuộc tính border-image-outset,
thuộc tính này đặt độ dịch chuyển hình ảnh cho đường viền