Tạo đường viền bằng hình ảnh trong CSS - CSS Border Images

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    14 thg 11, 2022

  • Số lượt xem

    133 lượt xem


Với thuộc tính CSS border-image, bạn có thể đặt một hình ảnh làm đường viền xung quanh một element.

Advertisement

CSS border-image

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

Thuộc tính này gồm 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

Chúng tôi sẽ sử dụng hình ảnh sau (được gọi là "border.png"):

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 ý: Để border-image hoạt động, element cũng cần có thuộc tính border!

Kết quả:

Chỉ định hình ảnh như một đường viền!

#borderimg {    border: 10px solid transparent;    padding: 15px;    border-image: url(border.png) 30 round;  }

 

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-outsetborder-image-repeat.

CSS border-image - Các giá trị Slice

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

Ví dụ 1:

border-image: url(border.png) 50 round;

Ví dụ 2:

border-image: url(border.png) 20% round;

Ví dụ 3:

border-image: url(border.png) 30% round;

#borderimg1 {    border: 10px solid transparent;    padding: 15px;    border-image: url(border.png) 50 round;  }    #borderimg2 {    border: 10px solid transparent;    padding: 15px;    border-image: url(border.png) 20% round;  }    #borderimg3 {    border: 10px solid transparent;    padding: 15px;    border-image: url(border.png) 30% round;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Tin tức mới

Tin tức thú vị

Nhà tài trợ: