Hướng dẫn dùng border image trong PHP

• Trang chủ
• Tham khảo
• CSS
• CSS3
• Thuộc tính border-image

Định nghĩa và sử dụng

Thuộc tính border trong css3 dùng để định dạng các dạng border bằng hình ảnh.

Cấu trúc

tag {
    border-image: giá trị;
    -moz-border-image: giá trị;
    -webkit-border-image: giá trị;
    -ms-border-image: giá trị;
    -o-border-image: giá trị;
}

Trong đó:

• -moz-animation hỗ trợ cho firefox.
• -webkit-animation hỗ trợ cho Google Chrome và Safari.
• -ms-animation hỗ trợ cho Internet Explorer.
• -o-animation hỗ trợ cho Opera.

HTML viết:

border image

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

p {
/* Safari and Chrome */
-webkit-border-image-source: url(images/border.png);
-webkit-border-image-slice: 30;
-webkit-border-image-width: 10px 20px;
-webkit-border-image-outset: 0 10px 10px 30px;
-webkit-border-image-repeat: round;

/* Firefox */
-moz-border-image-source: url(images/border.png);
-moz-border-image-slice: 30;
-moz-border-image-width: 10px 20px;
-moz-border-image-outset: 0 10px 10px 30px;
-moz-border-image-repeat: round;

/* Internet Explorer */
-ms-border-image-source: url(images/border.png);
-ms-border-image-slice: 30;
-ms-border-image-width: 10px 20px;
-ms-border-image-outset: 0 10px 10px 30px;
-ms-border-image-repeat: round;

/* Opera */
-o-border-image-source: url(images/border.png);
-o-border-image-slice: 30;
-o-border-image-width: 10px 20px;
-o-border-image-outset: 0 10px 10px 30px;
-o-border-image-repeat: round;

/* CSS3 */
border-image-source: url(images/border.png);
border-image-slice: 30;
border-image-width: 10px 20px;
border-image-outset: 0 10px 10px 30px;
border-image-repeat: round;
}

Hiển thị trình duyệt khi có CSS:

Ta có thể viết gọn lại như sau, CSS viết:

p {
/* Safari and Chrome */
-webkit-border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;

/* Firefox */
-moz-border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;

/* Internet Explorer */
-ms-border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;

/* Opera */
-o-border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;

/* CSS3 */
border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;
}

Hiển thị trình duyệt khi có CSS:

1) Thuộc tính border-image trong CSS

- Thuộc tính border-image dùng để thiết lập một đường viền hình ảnh bao quanh phần tử HTML, nó bao gồm các việc như:

• Xác định tập tin hình ảnh dùng để làm đường viền hình ảnh.
• Xác định các 'lát cắt" trong tấm hình.
• Xác định độ dày của đường viền hình ảnh.
• Xác định khoảng cách đẩy đường viền hình ảnh ra khỏi vị trí ban đầu của nó.
• Xác định kiểu lặp lại ở các cạnh của đường viền hình ảnh.

- Hay nói cách khác, thuộc tính border-image là cú pháp viết tắt của năm thuộc tính:

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

2) Cách sử dụng thuộc tính border-image trong CSS

- Để sử dụng thuộc tính border-image, ta dùng cú pháp như sau:

border-image: source slice / width / outset repeat | initial | inherit;

- Trong đó, ta thấy giá trị của thuộc tính border-image có thể được xác định bởi một trong ba loại: