outline-width
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính CSS outline-width đặt độ dày của đường viền ngoài (outline) của một phần tử. Đường viền ngoài là một đường được vẽ xung quanh phần tử, nằm ngoài border.
Try it
outline-width: 12px;
outline-width: thin;
outline-width: medium;
outline-width: thick;
<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 {
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Thông thường sẽ tiện hơn khi sử dụng thuộc tính viết tắt outline khi định nghĩa giao diện của đường viền ngoài.
Cú pháp
/* Giá trị từ khóa */
outline-width: thin;
outline-width: medium;
outline-width: thick;
/* Giá trị <length> */
outline-width: 1px;
outline-width: 0.1em;
/* Giá trị toàn cục */
outline-width: inherit;
outline-width: initial;
outline-width: revert;
outline-width: revert-layer;
outline-width: unset;
Thuộc tính outline-width được chỉ định bằng một trong các giá trị liệt kê dưới đây.
Giá trị
<length>-
Độ rộng của đường viền ngoài được chỉ định dưới dạng
<length>. thin-
Phụ thuộc vào trình duyệt. Thông thường tương đương với
1pxtrong trình duyệt máy tính để bàn (bao gồm Firefox). medium-
Phụ thuộc vào trình duyệt. Thông thường tương đương với
3pxtrong trình duyệt máy tính để bàn (bao gồm Firefox). thick-
Phụ thuộc vào trình duyệt. Thông thường tương đương với
5pxtrong trình duyệt máy tính để bàn (bao gồm Firefox).
Định nghĩa hình thức
| Initial value | medium |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | an absolute length; if the keyword none is specified, the computed value is 0 |
| Animation type | a length |
Cú pháp hình thức
outline-width =
<line-width>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
Ví dụ
Đặt độ rộng đường viền ngoài của phần tử
HTML
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>
CSS
span {
outline-style: solid;
display: inline-block;
margin: 20px;
}
#thin {
outline-width: thin;
}
#medium {
outline-width: medium;
}
#thick {
outline-width: thick;
}
#twopixels {
outline-width: 2px;
}
#oneex {
outline-width: 1ex;
}
#em {
outline-width: 1.2em;
}
Kết quả
Đặc tả
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-width |