- Trang chủ
- Tham khảo
- CSS
- Thuộc tính outline
Định nghĩa và sử dụng
Thuộc tính outline định dạng các đường viền bao ngoài.
Cấu trúc
tag { outline: giá trị; }
Với giá trị như sau:
outline | Mã màu Kiểu Độ rộng Kiểu Độ rộng | outline: #ff0000 solid 2px; | Đây là cách viết ngắn gọn, tổng hợpcủa các thuộc tính bên dưới. |
outline-color | Mã màu | outline-color: #ff0000; | Định dạng màu sắc cho đường bao ngoài. |
outline-style | dotted | outline-style: dotted; | Thành phần sử dụng outline |
dashed | outline-style: dashed; | Thành phần sử dụng outline | |
dashed | outline-style: dashed; | Thành phần sử dụng outline | |
dashed | outline-style: dashed; | Thành phần sử dụng outline | |
dashed | outline-style: dashed; | Thành phần sử dụng outline | |
dashed | outline-style: dashed; | Thành phần sử dụng outline | |
dashed | outline-style: dashed; | Thành phần sử dụng outline | |
dashed | outline-style: dashed; | Thành phần sử dụng outline | |
dashed | outline-style: dashed; | solid | |
outline-style: solid; | double | outline-style: double; | groove |
outline-style: groove;
HỌC WEB CHUẨN
ridge
outline-style: ridge;
p { outline: 5px double red; }
inset
outline-style: inset;
outset
outline-style: outset;
inherit 1 phút đọc
outline-style: inherit;
Xác định thừa hưởng thuộc tính từ thành phần cha [thành phần bao ngoài].
outline-width
Độ rộng
HTML chỉ cần đơn giản thế này
Make Awesome Things That Matter
outline-width: 2px;
CSS chúng ta sẽ làm như sau
.text-divider {
display: flex;
align-items: center;
--text-divider-gap: 1rem;
}
.text-divider::before,
.text-divider::after {
content: '';
height: 1px;
background-color: #333;
flex-grow: 1;
}
.text-divider::before {
margin-right: var[--text-divider-gap];
}
.text-divider::after {
margin-left: var[--text-divider-gap];
}
Xác định độ rộng cho đường bao ngoài.
.text-divider::before {
margin-right: 1rem;
}
.text-divider::after {
margin-left: 1rem;
}
Demo
Các bạn xem demo bên dưới nhé.
Lời kết
Hi vọng với tech nho nhỏ này sẽ giúp các bạn có thêm 1 cách nữa để viết Ttext header có Line border phân chia ở 2 bên nhé. Cảm ơn các bạn đã đọc bài !
Cảm ơn các bạn đã đọc bài !
All rights reserved