Thuộc tính outline-offset trong CSS thiết lập khoảng cách giữa outline và cạnh/viền của phần tử. Outline là đường vẽ quanh phần tử nằm ngoài viền. Khoảng trống giữa phần tử và outline trong suốt. Outline có thể không phải là hình chữ nhật. Giá trị mặc định là 0.
Syntax:
outline-offset: length|initial|inherit;
Property values:
- length: Đây là khoảng cách giữa outline và border. Nó là khoảng cách outline được đặt ngoài border. Giá trị này có thể âm. Nếu giá trị âm outline được đặt bên trong phần tử. Nếu giá trị là 0 không có khoảng cách giữa outline và phần tử.
Syntax:
outline-offset: 5px;
Example 1:
html<!DOCTYPE html>
<html>
<head>
<title>
outline-offset Property
</title>
<style>
div {
margin: 30px;
border: 2px solid blue;
background-color: yellow;
outline: 4px dashed red;
outline-offset: 15px;
}
</style>
</head>
<body>
<div >GeeksForGeeks</div>
<br>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>
outline-offset Property
</title>
<style>
div {
margin: 10px;
border: 2px solid red;
background-color: blue;
outline: 4px solid black;
outline-offset: 5px;
}
</style>
</head>
<body>
<div >GeeksForGeeks</div>
<br>
</body>
</html>
- initial: Đặt thuộc tính
outline-offsetvề giá trị mặc định.
syntax:
outline-offset: initial;
Example 3:
html<!DOCTYPE html>
<html>
<head>
<title>
outline-offset Property
</title>
<style>
div {
margin: 30px;
border: 2px solid blue;
background-color: yellow;
outline: 4px dashed red;
outline-offset: initial;
}
</style>
</head>
<body>
<div>GeeksForGeeks</div>
<br>
</body>
</html>
- inherit: Phần tử kế thừa thuộc tính
outline-offsettừ phần tử cha của nó.
syntax:
outline-offset: inherit;
Supported Browsers: Các trình duyệt hỗ trợ outline-offset Property được liệt kê dưới đây:
- Google Chrome 1.0 trở lên
- Edge 15.0 trở lên
- Opera 9.5 trở lên
- Firefox 1.5 trở lên
- Apple Safari 1.2 trở lên