Thuộc tính borderImageOutset trong HTML DOM dùng để thiết lập hoặc trả về giá trị mở rộng vùng hình ảnh nền ra khỏi hộp viền (border box) của phần tử. Sử dụng giá trị cho top, left, right, bottom để chỉ định hình ảnh nền mở rộng bao nhiêu từ các viền tương ứng.
Cú pháp
Thiết lập thuộc tính borderImageOutset
object.style.borderImageOutset = "length|number|initial|inherit"
Các giá trị thuộc tính giải thích như sau:
| Giá trị | Mô tả |
|---|---|
| Length | Định nghĩa hình ảnh mở rộng bao xa từ border box. Giá trị mặc định 0 (không mở rộng ra khỏi border box). |
| Number | Định nghĩa giá trị số là bội số của border-width. |
| Initial | Đặt thuộc tính về giá trị khởi tạo. |
| Inherit | Kế thừa giá trị thuộc tính từ cha. |
Ví dụ
Ví dụ cho thuộc tính borderImageOutset:
<!DOCTYPE html> <html> <head> <style> #P1 { border: 20px solid transparent; margin: 20px; border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30 round; border-image-outset: 5px; background-color: lightgreen; } </style> <script> function changeBottomOutset(){ document.getElementById("P1").style.borderImageOutset = "20px"; document.getElementById("Sample").innerHTML = "Border image outset đã được tăng"; } </script> </head> <body> <h2>Tiêu đề Demo</h2> <p id="P1"> Đây là đoạn văn mẫu chứa một số văn bản. Đoạn văn này chỉ được tạo cho ví dụ này</p> <p>Thay đổi border image outset của div trên bằng cách click nút bên dưới</p> <button onclick="changeBottomOutset()">Thay đổi Bottom Outset</button> <p id="Sample"></p> </body> </html>
Kết quả
Ví dụ này sẽ cho kết quả sau:
Khi click nút “Thay đổi Border Outset”:
