Hình ảnh biên giới - Thủ thuật CSS

border-image là một thuộc tính viết tắt cho phép bạn sử dụng hình ảnh hoặc CSS gradient làm đường viền của một phần tử.

.module ( border-image: url(border.png.webp) 25 25 round; )

Các border-imagebất động sản có thể được áp dụng cho bất kỳ yếu tố, ngoại trừ yếu tố bảng nội (ví dụ tr, th, td) khi border-collapseđược thiết lập để collapse.

Tính chất

Thuộc tính bắt buộc duy nhất cho tốc border-imageký là border-image-source. Các thuộc tính khác mặc định là giá trị ban đầu của chúng nếu chúng không được chỉ định. Đây là các border-imagethuộc tính theo thứ tự:

`border-image-source`

.module ( border-image-source: url(border.png.webp); )

Thuộc tính này chỉ định nguồn cho hình ảnh đường viền. Đây có thể là URL, URI dữ liệu, CSS gradient hoặc SVG nội tuyến (mặc dù hỗ trợ bị giới hạn cho SVG nội tuyến, hãy xem ghi chú sử dụng SVG).

Giá trị ban đầu là none.

`border-image-slice`

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

Các giá trị của thuộc tính này cho trình duyệt biết vị trí "cắt" hình ảnh để tạo các mảnh của đường viền. Hình ảnh được chia thành 9 phần - bốn góc, bốn cạnh và trung tâm.

Tám trái tim trong một hình ảnh "khung", được phóng to để hiển thị chi tiết. Các đường màu đỏ chỉ ra các lát.

Nếu bạn nghĩ điều đó nghe có vẻ phi lý, bạn đang ở trong một công ty tốt. Vài năm trước, đã có một cuộc thảo luận dài về chủ đề này trên blog của Eric Myer, nơi có nhiều chuyên gia phát triển giao diện người dùng quan tâm.

Trong bản demo này, một trái tim lặp lại xung quanh đường viền của div. Các border-image-sourcehình ảnh là một hình ảnh tổng hợp của tám trong số các biểu tượng trái tim cùng, thái lát để các hình trái tim đầy đủ được sử dụng trên mỗi bên của nguyên tố này.

Xem bản trình diễn hình ảnh đường viền Bút: đường viền biểu tượng bằng CSS-Tricks (@ css-trick) trên CodePen.

Thêm ghi chú sử dụng

Mặc dù hỗ trợ cho border-imageđã được cải thiện - nó được hỗ trợ không cố định trong tất cả các phiên bản trình duyệt hiện tại - việc thiết lập borderkiểu dự phòng vẫn rất đáng giá. Đường viền dự phòng của bạn sẽ hiển thị trên các trình duyệt không hỗ trợ border-imagehoặc nếu hình ảnh không tải được.

Không giống như một số thuộc tính đường viền khác, border-imagekhông thể hoạt ảnh. Nó cũng không thể được tạo kiểu với border-radius.

Nếu bạn khai báo a border-image-sourcevà borderchiều rộng hoặc border-image-widthkhông có bất kỳ lát cắt nào, toàn bộ hình ảnh không được cắt ghép sẽ được đặt ở bốn góc của phần tử, được chia tỷ lệ theo chiều rộng đã chỉ định của bạn.

Có liên quan

border
border-collapse
box-sizing

Thêm thông tin

border-image trong Mô-đun Nền và Đường viền CSS cấp 3 CR
border-image tại MDN
border-image.com, công cụ này cho phép bạn tải lên hình ảnh và chơi với các lát đường viền cho đến khi bạn làm đúng, sau đó nó tạo CSS cho bạn.
Hình ảnh đường viền được giải thích từ Dudley Storey.

Các bản trình diễn khác

Cũng từ Dudley Storey, Hình ảnh đường viền thực tế: khung ảnh đáp ứng, bản demo CodePen. Đây là một ví dụ điển hình về việc sử dụng hình ảnh đường viền một cách hợp lý trên hình ảnh phản hồi. Lưu ý rằng "khung" bị loại bỏ ở kích thước màn hình nhỏ hơn.
Các đường viền chấm chấm thực sự bằng cách sử dụng SVG và hình ảnh đường viền, một cây bút của Lucas Lemonnier. Một giải pháp cho đường viền "chấm" hình vuông xấu xí, phương pháp này mang đến cho bạn những chấm tròn thực sự!
nút gradient, một cây bút của người dùng CodePen GSSxGSS. Một ví dụ khá đẹp về gradient tuyến tính làm hình ảnh đường viền.
Phim Strip, Bút của Nick Pettit. Có lẽ không phải là bản demo thực tế nhất, đây là một ví dụ thú vị, thú vị về những gì bạn có thể làm với border-image.

Hỗ trợ trình duyệt

border-imagetiền tố nhà cung cấp yêu cầu ban đầu trên tất cả các trình duyệt hỗ trợ nó. Bây giờ nó hoạt động không cần cố định trong phiên bản mới nhất của tất cả các trình duyệt. Bảng này hiển thị cả hỗ trợ có tiền tố sớm nhất và hỗ trợ không có tiền tố sớm nhất nếu có.