outline-offset
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
Thuộc tính CSS outline-offset đặt khoảng cách giữa outline và cạnh hoặc border của một phần tử.
Try it
outline-offset: 4px;
outline-offset: 0.6rem;
outline-offset: 12px;
outline: 5px dashed blue;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section>
#example-element {
border: 2px solid crimson;
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Cú pháp
css
/* Giá trị <length> */
outline-offset: 3px;
outline-offset: 0.2em;
/* Giá trị toàn cục */
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;
Giá trị
<length>-
Chiều rộng của khoảng cách giữa phần tử và outline của nó. Giá trị âm đặt outline bên trong phần tử. Giá trị
0đặt outline sao cho không có khoảng cách giữa nó và phần tử.
Mô tả
Outline là đường kẻ được vẽ xung quanh một phần tử, bên ngoài cạnh border. Khoảng cách giữa phần tử và outline của nó là trong suốt. Nói cách khác, nó giống với nền của phần tử cha.
Định nghĩa hình thức
| Initial value | 0 |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length |
Cú pháp hình thức
outline-offset =
<length>
Ví dụ
Đặt outline offset bằng pixel
HTML
html
<p>Gallia est omnis divisa in partes tres.</p>
CSS
css
p {
outline: 1px dashed red;
outline-offset: 10px;
background: yellow;
border: 1px solid blue;
margin: 15px;
}
Kết quả
Đặc tả
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-offset |