1.Thuộc tính border-image trong CSS

Thuộc tính CSS border-image cho phép bạn chỉ định một hình ảnh sẽ được sử dụng làm đường viền xung quanh một phần tử

Thuộc tính này có ba phần:

  • Hình ảnh được sử dụng làm đường viền
  • Cắt hình ảnh ở đâu
  • Xác định xem các phần giữa nên được lặp lại hay kéo dài

Thuộc tính border-image lấy hình ảnh và cắt nó thành chín phần, giống như bảng tic-tac-toe. Sau đó, nó đặt các góc ở các góc, và các phần ở giữa được lặp lại hoặc kéo dài như bạn chỉ định

Lưu ý: Để hình ảnh đường viền hoạt động, phần tử cũng cần có thuộc tính border!

Ví dụ:

Mẹo: Thuộc tính border-image thực sự là thuộc tính viết tắt cho các thuộc tính border-image-source, border-image-Slice, border-image-width, border-image-outset và border-image-repea

2. CSS border-image vơi các giá trị khác nhau

Các giá trị lát cắt khác nhau thay đổi hoàn toàn giao diện của đường viền

Ví dụ: