Css 3: border-image tạo đường viền bằng hình ảnh

Để chạy đầy đủ trên các trình duyệt thì người ta sẽ bổ sung thuộc tính hack css đó là:

Giá trị OFFSET tuân theo quy tắc rút gọn trong CSS như sau:
Nếu có 4 giá trị (25 25 25 25) thì tương đương với (cạnh trên, cạnh phải, cạnh dưới, cạnh trái).
Nếu có 3 giá trị (25 25 25) thì tương đương với (cạnh trên, cạnh trái + phải, cạnh dưới)
Nếu có 2 giá trị (25 25) thì tương đương với (cạnh trên + dưới, cạnh trái + phải)
Nếu có 1 giá trị (25) thì tương đương với (cạnh trên + dưới + trái + phải)

1. Tạo đường viền đẹp mắt cho đối tượng bao nội dung bằng hình ảnh với cú pháp:

border-image: url(border.png) 30 round; Ở đây, phần giữa của hình ảnh được lặp đi lặp lại để tạo ra đường viền bao cho đối tượng:

2. đơn vị trong cú pháp, tạo đường viền bằng hình ảnh
border-image: url('link dẫn hình ảnh muốn làm đường bao' ) -  tọa độ cắt hình ảnh - hình ảnh có được (lặp hại hay kéo dài).
Lưu ý: Chiều cao của đường viền phụ thuộc vào chiều cao của thuộc tính border nên bạn phải tạo border thì mới sử dụng được border-image.
Ví dụ:
#ilement{
border: weght px - style border - transparent;
border-image: url(image.png) - offset(tọa độ) - các phần giữa nên được lặp đi lặp lại hoặc kéo dài
}
- Stretch: kéo giãn hình ảnh cho tương thích với chiều rộng của các cạnh.
- Repeat: lặp lại hình ảnh cho các cạnh
- Round: Lặp lại hình ảnh cho các cạnh nhưng nó sẽ fit lần lặp theo tỉ lệ phần trăm, nghĩa là nó sẽ co giãn sao cho lặp vừa khít. Chính vì vậy nếu ta chọn OFFSET chuẩn và chọn chế độ round thì sẽ đẹp, tuy nhiên backgroud sẽ bị co giãn nếu chiều rộng không tương thích với hình ảnh.
Nguồn: freetuts.net