BASIC TO ADVANCE

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ả

 

Đăng ký nhận tin.

Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!

Vũ Thanh Tài

About author
The best way to learn is to share
Xem tất cả bài đăng

0 Comments

Bài viết chưa có ai bình luận, hãy là người đầu tiên đi bạn!

Bình luận

Captcha