Ngôn ngữ CSS - CSS3 Border Images
Bài trước
Bài sau

Thuộc tính border Images (Góc bo hình ảnh)

Thuộc tính Border Image trong CSS được sử dụng để thêm hình ảnh xuất hiện trên đường viền cho các thành phần. Bạn không cần sử dụng bất cứ HTML code nào để gọi Border Image. 
Cú pháp đơn giản cho Border Image như sau:

tagName {
    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.

Dưới đây là một số giá trị được sử dụng chủ yếu:

Giá trị Mô tả
border-image-source Thiết lập đường dẫn tới vị trí hình ảnh
border-image-slice Được sử dụng để cắt Border Image thành các miếng mỏng
border-image-width Thiết lập độ rộng cho Border Image
border-image-repeat Nhận các giá trị round, repeat hoặc stretch để tạo hiệu quả tương ứng cho Border Image

Ví dụ:

<html>
<head>
<style>
#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(images/border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(images/border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(images/border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(images/border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(images/border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(images/border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(images/border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(images/border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(images/border.png) 30% round;
}
</style>
</head>
<body>

<p id="borderimg1">border-image: url(images/border.png) 50 round;</p>
<p id="borderimg2">border-image: url(images/border.png) 20% round;</p>
<p id="borderimg3">border-image: url(images/border.png) 30% round;</p>

<p><strong>Note:</strong> IE 10, Và các phiên bản trước đó không hỗ trợ thuộc tính này.</p>

</body>
</html>

Xem ví dụ

Trình duyệt hỗ trợ:

Thuộc tính Chrome IE Firefox Safari Opera
background-image
(có nhiều backgrounds)		 4.0 9.0 3.6 3.1 11.5
background-size 4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-
background-origin 1.0 9.0 4.0 3.0 10.5
background-clip 4.0 9.0 4.0 3.0 10.5

 


Bài trước
Bài sau

HiepsiitMe Facebook Twitter Pinterest LinkedIn

 

 

×