Thuộc tính CSS border-image-slice
Thí dụ
Chỉ định cách cắt hình ảnh đường viền:
#borderimg {
border-image-slice: 30%;
}
Định nghĩa và Cách sử dụng
Thuộc border-image-slice
tính 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à chính 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: Cũng xem xét thuộc tính border-image (một thuộc tính viết tắt để đặ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ỗ 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 border-image-slice
tính có thể nhận từ một đến bốn giá trị. Nếu giá trị thứ tư bị bỏ qua, nó giống với giá trị thứ hai. Nếu cái thứ ba cũng được bỏ qua, nó giống như cái đầu tiên. Nếu cái thứ hai cũng bị bỏ qua, nó giống như cái thứ nhất.
Giá trị tài sản
Value | Description | Play it |
---|---|---|
number | The number(s) represent pixels for raster images or coordinates for vector images | |
% | Percentages are relative to the height or width of the image | |
fill | Causes the middle part of the image to be displayed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Các trang liên quan
Hướng dẫn CSS: Hình ảnh đường viền CSS
Tham chiếu CSS: thuộc tính border-image
Tham chiếu CSS: thuộc tính border-image-outset
Tham chiếu CSS: thuộc tính border-image-repeat
Tham chiếu CSS: thuộc tính border-image-source
Tham chiếu CSS: thuộc tính border-image-width
Tham chiếu DOM HTML: thuộc tính borderImageSlice