DANH MỤC: Nền và Viền

Thuộc tính border-image-slice trong CSS3


Cú Pháp

-Thuộc tính này có tác dụng thiết lập phần cắt viền ảnh (border-image) với các cạnh của thành phần.

Cú Pháp

border-image-slice: number|%|fill;

Trong đó:

  • number - có thể điền vào từ 1 đến 4 tham số với các giá trị tương ứng như trong thuộc tính margin padding, nhưng không cần điền đơn vị.
  • % - có thể điền vào từ 1 đến 4 tham số với các giá trị tương ứng như trong thuộc tính margin padding, nhưng đơn vị là %.
  • fill - lấy phần ở giữa của viền ảnh.

Ví Dụ

VD1: Khi giá trị là số.

p{
    border: 15px solid transparent;
    padding: 15px;    
    border-image: url(border.png);
    border-image-slice:15;
    border-image-repeat: round;
}

Xem Kết Quả

VD2: Khi giá trị là %.

p{
    border: 15px solid transparent;
    padding: 15px;    
    border-image: url(border.png);
    border-image-slice:15%;
    border-image-repeat: round;
}

Xem Kết Quả

 

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

Biển học vô biên, quay đầu là dại!

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia