outline-style
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-style đặt kiểu của outline một phần tử. Outline là đường kẻ được vẽ xung quanh một phần tử, bên ngoài border.
Try it
outline-style: none;
outline-style: dotted;
outline-style: solid;
outline-style: groove;
outline-style: inset;
<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 tiện hơn khi sử dụng thuộc tính viết tắt outline khi xác định giao diện của outline.
Cú pháp
/* Giá trị từ khóa */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;
/* Giá trị toàn cục */
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: revert-layer;
outline-style: unset;
Thuộc tính outline-style được chỉ định là bất kỳ một trong các giá trị liệt kê bên dưới.
Giá trị
auto-
Cho phép tác nhân người dùng hiển thị kiểu outline tùy chỉnh.
none-
Không sử dụng outline.
outline-widthlà0. dotted-
Outline là một chuỗi các chấm.
dashed-
Outline là một chuỗi các đoạn đường ngắn.
solid-
Outline là một đường đơn.
double-
Outline là hai đường đơn.
outline-widthlà tổng của hai đường và khoảng cách giữa chúng. groove-
Outline trông như thể được khắc vào trang.
ridge-
Ngược lại với
groove: outline trông như thể được đùn ra từ trang. inset-
Outline làm cho hộp trông như thể được nhúng vào trang.
outset-
Ngược lại với
inset: outline làm cho hộp trông như thể đang nhô ra khỏi trang.
Định nghĩa hình thức
| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |
Cú pháp hình thức
outline-style =
auto |
<outline-line-style>
<outline-line-style> =
none |
auto |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Ví dụ
Đặt outline-style thành auto
Giá trị auto chỉ ra một kiểu outline tùy chỉnh, được mô tả trong đặc tả là "thường là một kiểu [là] mặc định giao diện người dùng cho nền tảng, hoặc có thể là một kiểu phong phú hơn những gì có thể mô tả chi tiết trong CSS, ví dụ như outline với cạnh bo tròn và các pixel bên ngoài bán trong suốt trông như phát sáng".
HTML
<div>
<p class="auto">Outline Demo</p>
</div>
CSS
.auto {
outline-style: auto; /* same result as "outline: auto" */
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Kết quả
Đặt outline-style thành dashed và dotted
HTML
<div>
<div class="dotted">
<p class="dashed">Outline Demo</p>
</div>
</div>
CSS
.dotted {
outline-style: dotted; /* same result as "outline: dotted" */
}
.dashed {
outline-style: dashed;
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Kết quả
Đặt outline-style thành solid và double
HTML
<div>
<div class="solid">
<p class="double">Outline Demo</p>
</div>
</div>
CSS
.solid {
outline-style: solid;
}
.double {
outline-style: double;
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Kết quả
Đặt outline-style thành groove và ridge
HTML
<div>
<div class="groove">
<p class="ridge">Outline Demo</p>
</div>
</div>
CSS
.groove {
outline-style: groove;
}
.ridge {
outline-style: ridge;
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Kết quả
Đặt outline-style thành inset và outset
HTML
<div>
<div class="inset">
<p class="outset">Outline Demo</p>
</div>
</div>
CSS
.inset {
outline-style: inset;
}
.outset {
outline-style: outset;
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Kết quả
Đặc tả
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-style |