Định nghĩa và sử dụng. Thuộc tính border trong css3 dùng để định dạng các dạng border-image-slice, border-image-width, border-image-outset, border-image-repeat, bằng hình ảnh.

Danh ngôn cuộc sống:

• Bài viết được đăng bởi: Mr. Phan Nhan
• Ngày cập nhật bài viết: 13/05/2016
• Tổng lược xem trang: 727 / 1 khách
• Đánh giá bởi người dùng:

Đị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:

<html>
<head></head>
<body>
<p>border image</p>
</body>
</html>

CSS viết:

p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 0 round;
-moz-border-image: url(images/border.png) 30 / 10px / 0 round;
-ms-border-image: url(images/border.png) 30 / 10px / 0 round;
-o-border-image: url(images/border.png) 30 / 10px / 0 round;
border-image: url(images/border.png) 30 / 10px / 0 round;
}

Thuộc tính border-image-slice 4 giá trị: Phần lát cắt image với 4 thành phần của border khác nhau. CSS viết:

p {
height: 50px;
-webkit-border-image: url(images/border.png) 10 15 20 25 / 10px / 0 round;
-moz-border-image: url(images/border.png) 10 15 20 25 / 10px / 0 round;
-ms-border-image: url(images/border.png) 10 15 20 25 / 10px / 0 round;
-o-border-image: url(images/border.png) 10 15 20 25 / 10px / 0 round;
border-image: url(images/border.png) 10 15 20 25 / 10px / 0 round;
}

Thuộc tính border-image-width 4 giá trị : Bề rộng image của thành phần trái và phải bằng nhau. CSS viết:

p {
height: 50px;
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 30px 20px 10px 40px / 0 round;
-moz-border-image: url(images/border.png) 30 / 30px 20px 10px 40px / 0 round;
-ms-border-image: url(images/border.png) 30 / 30px 20px 10px 40px / 0 round;
-o-border-image: url(images/border.png) 30 / 30px 20px 10px 40px / 0 round;
border-image: url(images/border.png) 30 / 30px 20px 10px 40px / 0 round;
}

Thuộc tính border-image-outset 4 giá trị : Xác định giá trị image vượt ra ngoài vùng giới hạn của vùng bao, với 4 thành phần khác nhau. CSS viết:

p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 10px 20px 30px 40px round;
-moz-border-image: url(images/border.png) 30 / 10px / 10px 20px 30px 40px round;
-ms-border-image: url(images/border.png) 30 / 10px / 10px 20px 30px 40px round;
-o-border-image: url(images/border.png) 30 / 10px / 10px 20px 30px 40px round;
border-image: url(images/border.png) 30 / 10px / 10px 20px 30px 40px round;
}

Thuộc tính border-image-repeat với giá trị repeat : Image của border sẽ được lặp lại, cả phần nội dung và phần border. CSS viết:

p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 0 repeat;
-moz-border-image: url(images/border.png) 30 / 10px / 0 repeat;
-ms-border-image: url(images/border.png) 30 / 10px / 0 repeat;
-o-border-image: url(images/border.png) 30 / 10px / 0 repeat;
border-image: url(images/border.png) 30 / 10px / 0 repeat;
}

Thuộc tính border-image-repeat với giá trị round : Image của border sẽ được lặp lại, cả phần nội dung và phần border, tuy nhiên vùng lặp sẽ tự động tỷ lệ cho phù hợp với vùng bao. CSS viết:

Thuộc tính border-image-repeat với giá trị stretch : Image của border sẽ được kéo dài, nếu border-image-repeat không khai báo thì border image sẽ có dạng stretch. CSS viết:

p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 0 stretch;
-moz-border-image: url(images/border.png) 30 / 10px / 0 stretch;
-ms-border-image: url(images/border.png) 30 / 10px / 0 stretch;
-o-border-image: url(images/border.png) 30 / 10px / 0 stretch;
border-image: url(images/border.png) 30 / 10px / 0 stretch;
}

Thuộc tính border-image-repeat với 2 giá trị : Image của border sẽ được lặp lại với 2 thành phần trên và dưới giống nhau, trái và phải giống nhau. CSS viết:

p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 0 stretch round;
-moz-border-image: url(images/border.png) 30 / 10px / 0 stretch round;
-ms-border-image: url(images/border.png) 30 / 10px / 0 stretch round;
-o-border-image: url(images/border.png) 30 / 10px / 0 stretch round;
border-image: url(images/border.png) 30 / 10px / 0 stretch round;
}

Thuộc tính border-image tổng hợp của các dạng border-image trên. CSS viết:

p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 10 / 10px 20px 20px / 0 10px stretch round;
-moz-border-image: url(images/border.png) 30 10 / 10px 20px 20px / 0 10px stretch round;
-ms-border-image: url(images/border.png) 30 10 / 10px 20px 20px / 0 10px stretch round;
-o-border-image: url(images/border.png) 30 10 / 10px 20px 20px / 0 10px stretch round;
border-image: url(images/border.png) 30 10 / 10px 20px 20px / 0 10px stretch round;
}

Những bài viết được đăng mới nhất.

» Công cụ xóa dấu Tiếng việt