Thuộc tính CSS border-image-slice
Định nghĩa và cách sử dụng
Thuộc tính border-image-slice
chỉ định cách cắt hình ảnh được chỉ định bởi border-image-source . Hình ảnh luôn được cắt thành chín phần: bốn góc, bốn cạnh và phần giữa.
Phần "ở giữa" được coi là hoàn toàn trong suốt, trừ khi từ khóa điền được đặt.
Mẹo: Ngoài ra, hãy xem thuộc tính border-image (thuộc tính tốc ký để đặt tất cả các thuộc tính border-image-*).
Giá trị mặc định: | 100% |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.borderImageSlice="30%" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Cú pháp CSS
border-image-slice: number | % |fill|initial|inherit;
Lưu ý: Thuộc tính border-image-slice
có thể nhận từ một đến bốn giá trị. Nếu giá trị thứ tư bị bỏ qua, nó sẽ giống giá trị thứ hai. Nếu cái thứ ba cũng bị bỏ qua thì nó cũng giống như cái thứ nhất. Nếu cái thứ hai cũng bị bỏ qua thì cái thứ nhất cũng giống như vậy.
Giá trị tài sản
Value | Description | Play it |
---|---|---|
number | The number(s) represent pixels for raster images or coordinates for vector images | Demo ❯ |
% | Percentages are relative to the height or width of the image | Demo ❯ |
fill | Causes the middle part of the image to be displayed | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Trang liên quan
Hướng dẫn CSS: Hình ảnh viền CSS
Tham khảo CSS: thuộc tính hình ảnh viền
Tham khảo CSS: thuộc tính border-image-outset
Tham khảo CSS: thuộc tính lặp lại hình ảnh viền
Tham khảo CSS: thuộc tính nguồn hình ảnh viền
Tham khảo CSS: thuộc tính border-image-width
Tham chiếu DOM HTML: thuộc tính borderImageSlice