Hình viền CSS

Hình viền CSS

Bằng cách sử dụng CSS border-image Thuộc tính có thể thiết lập hình ảnh được sử dụng làm viền xung quanh phần tử.

Thuộc tính border-image CSS

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

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

  • Hình ảnh được sử dụng làm viền
  • Đâu là nơi cắt hình ảnh
  • Định nghĩa phần giữa nên lặp lại hay kéo dãn

Chúng ta sẽ sử dụng hình ảnh này ("border.png")

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

Lưu ý:Để làm cho border-image Sự tác động, phần tử này还需要设置 border Thuộc tính!

Ở đây, phần giữa của hình ảnh được lặp lại để tạo viền:

Hình ảnh làm viền!

Đây là mã nguồn:

Mô hình

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

Thử ngay!

Ở đây, phần giữa của hình ảnh được kéo dãn để tạo viền:

Hình ảnh làm viền!

Đây là mã nguồn:

Mô hình

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

Thử ngay!

Lưu ý:border-image Thuộc tính thực chất là viết tắt của các thuộc tính sau:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - Các giá trị cắt khác nhau

Các giá trị cắt khác nhau sẽ thay đổi hoàn toàn ngoại觀 của viền:

Mô hình 1:

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

Mô hình 2:

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

Mô hình 3:

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

Đây là mã nguồn:

Mô hình

#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;
}

Thử ngay!

Thuộc tính hình ảnh viền CSS

Thuộc tính Mô tả
border-image Thuộc tính viết tắt để thiết lập tất cả các thuộc tính border-image-*.
border-image-source Định nghĩa đường dẫn hình ảnh được sử dụng làm viền.
border-image-slice Điều chỉnh cách cắt hình ảnh biên.
border-image-width Điều chỉnh độ rộng hình ảnh biên.
border-image-outset Điều chỉnh lượng khu vực hình ảnh biên vượt ra ngoài hộp biên.
border-image-repeat Điều chỉnh lại hình ảnh biên theo cách lặp lại, làm tròn hoặc kéo dãn.