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

    507 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.

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

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.