Thuộc tính border-image-outset trong CSS
Bùi Tấn Lực - 855
- 07/10/2025
Chức năng của Thuộc tính border-image-outset trong CSS
Thuộc tính border-image-outset trong CSS dùng để quy định khoảng cách đường viền bằng hình ảnh nằm ngoài phần tử HTML bao nhiêu px.
Cú pháp của Thuộc tính border-image-outset trong CSS
border-image-outset: khoangcach;
khoangcach: Khoảng cách đường viền bằng hình ảnh nằm ngoài phần tử HTML (Ví dụ: 10px, 5px, 0px,....)
Code Thuộc tính border-image-outset trong CSS
border-image-outset: 10px;
border-image-outset: 5px;
border-image-outset: 0px;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-image-outset trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; float:left; height:auto; border: 10px solid transparent;
padding: 15px; margin-bottom:15px; border-image-slice: 30;border-image-source: url('https://webmoi.vn/thumuc/border-hinh.png');border-image-repeat: stretch;border-image-width: 10px; background: red; color:#fff;
}
</style>
</head>
<body>
<h1>Code Thuộc tính border-image-outset trong CSS</h1>
<p>Dùng để quy định khoảng cách đường viền bằng hình ảnh nằm ngoài phần tử HTML bao nhiêu px:</p>
<div style="border-image-outset: 10px;">border-image-outset: 10px;</div>
<div style="border-image-outset: 5px;">border-image-outset: 5px;</div>
<div style="border-image-outset: 0px;">border-image-outset: 0px;</div>
<p><b>Hình gốc:</b></p>
<p><img src="https://webmoi.vn/thumuc/border-hinh.png"></p>
</body>
</html>
Cách sử dụng border-image-outset hiệu quả trong CSS
border-image-outset phát huy tác dụng khi bạn muốn phần đường viền bằng hình ảnh vượt ra khỏi giới hạn thông thường của phần tử. Để kiểm soát kết quả chính xác, nên xem xét vị trí hiển thị, độ rộng vùng viền và cách các thuộc tính liên quan phối hợp với nhau.
border-image-outset ảnh hưởng đến vị trí đường viền như thế nào?
Giá trị của border-image-outset xác định khoảng cách mà vùng border image được mở rộng ra bên ngoài cạnh của phần tử. Khi tăng giá trị này, hình ảnh viền sẽ nằm xa phần nội dung hơn thay vì chỉ xuất hiện trong phạm vi border thông thường.
Thuộc tính này không làm thay đổi kích thước thực của phần tử theo cách width hoặc height hoạt động. Vì vậy, phần border image được đẩy ra ngoài có thể phủ lên khu vực xung quanh và cần được tính đến khi bố trí các thành phần gần đó.
.box {
border: 12px solid transparent;
border-image: url(border.png) 30 round;
border-image-outset: 8px;
}
Trong ví dụ trên, phần border image được mở rộng thêm 8px ra ngoài phần tử. Nếu thay đổi giá trị này, vị trí hiển thị của đường viền cũng thay đổi theo mà không cần chỉnh lại kích thước nội dung bên trong.
Cách kết hợp border-image-outset với border-image-width
border-image-width và border-image-outset có vai trò khác nhau nhưng thường cần được thiết lập cùng nhau. border-image-width kiểm soát độ rộng của vùng border image, trong khi border-image-outset quyết định vùng đó được mở rộng ra ngoài bao nhiêu.
Khi border image có thiết kế dày hoặc nhiều chi tiết, có thể tăng border-image-width để tạo vùng viền phù hợp, sau đó dùng border-image-outset để đưa vùng viền này ra ngoài phần tử. Cách kết hợp này giúp kiểm soát cả kích thước lẫn vị trí hiển thị.
.frame {
border: 10px solid transparent;
border-image: url(frame.png) 40 stretch;
border-image-width: 15px;
border-image-outset: 6px;
}
Không nên tăng đồng thời hai giá trị một cách tùy ý. Nếu vùng border image đã đủ lớn mà tiếp tục tăng border-image-outset, đường viền có thể tạo khoảng cách quá rộng với phần tử và ảnh hưởng đến bố cục xung quanh.
Những lưu ý khi sử dụng border-image-outset
- Không dùng giá trị quá lớn: phần border image mở rộng quá nhiều có thể chồng lên các thành phần lân cận.
- Kiểm tra border-image: border-image-outset chỉ phát huy tác dụng khi phần tử thực sự sử dụng border image.
- Kết hợp với border-image-width hợp lý: hai thuộc tính nên được cân chỉnh dựa trên kích thước và thiết kế của hình ảnh viền.
- Kiểm tra bố cục thực tế: phần mở rộng của border image nằm bên ngoài phần tử nên cần xem xét khi thiết kế các thành phần gần nhau.
- Ưu tiên đơn vị phù hợp: có thể dùng giá trị độ dài hoặc hệ số tùy nhu cầu, nhưng nên chọn cách thiết lập dễ kiểm soát trong giao diện.
Trong thực tế, nên bắt đầu với một giá trị nhỏ cho border-image-outset, quan sát khoảng mở rộng của đường viền rồi điều chỉnh dần. Cách này giúp giữ thiết kế cân đối mà không làm ảnh hưởng ngoài ý muốn đến bố cục trang.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-image-outset trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
