Thuộc tính Outline trong CSS

Bài học dưới đây Taimienphi.vn sẽ giới thiệu cho bạn thuộc tính Outline trong CSS. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học CSS khác đã có trên Taimienphi.vn để tìm hiểu thuộc tính cursor trong CSS nhé.

Thuộc tính Outline trong CSS được sử dụng để định dạng các đường viền bao bên ngoài, làm nổi bật phần tử. Tham khảo tiếp bài học CSS dưới đây của Taimienphi.vn để tìm hiểu chi tiết thuộc tính Outline trong CSS.

thuoc tinh outline trong css

Thuộc tính Outline trong CSS

Mục Lục bài viết:
1. Thuộc tính Outline trong CSS
1.1. Thuộc tính outline-style trong CSS
1.2. Thuộc tính outline-color
1.3. Thuộc tính outline-width
1.4. Thuộc tính outline rút gọn
1.5. Thuộc tính outline-offset
1.6. Các thuộc tính Outline trong CSS

1. Thuộc tính Outline trong CSS

Các thuộc tính Outline trong CSS bao gồm:

- Thuộc tính outline-style
- Thuộc tính outline-color
- Thuộc tính outline-width
- Thuộc tính outline-offset
- Thuộc tính outline

1.1 Thuộc tính outline-style trong CSS

Thuộc tính outline-style trong CSS xác định style, hình dạng của đường outline. Các giá trị của thuộc tính này có thể là:

dotted - đường viền outline là dấu chấm.

dashed - đường viền outline là nét đứt.

solid - đường viền outline là nét liền.

double - đường viền outline là 2 nét.

groove - đường viền outline là đường viền rãnh 3D.

ridge - xác định đường viền cho đường chóp.

inset - xác định đường viền cho đường bóng bên trong.

outset - xác định đường viền cho đường bóng bên ngoài.

none -không có đường viền.

hidden - xác định đường viền ẩn.

Ví dụ:

thuoc tinh outline trong css

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh outline trong css 2

1.2 Thuộc tính outline-color

Thuộc tính outline-color được sử dụng để thiết lập màu sắc cho đường viền bao bên ngoài.

Giá trị màu sắc được thiết lập bởi:

- Name: chỉ định tên một màu bất kỳ, chẳng hạn như red.

- Hex: chỉ định giá trị hex, chẳng hạn như #ff0000.

- RBG: chỉ định giá trị RBG, chẳng hạn như rgb(255,0,0).

- invert: tạo màu đảo ngược.

Ví dụ 1:

Ví dụ dưới đây thiết lập 4 màu sắc khác nhau cho 4 đường bao:

thuoc tinh outline trong css 3

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh outline trong css 4

Ví dụ 2:

Ví dụ dưới đây sử dụng outline-color: invert để tạo màu đảo ngược.

thuoc tinh outline trong css 5

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh outline trong css 6

1.3 Thuộc tính outline-width

Thuộc tính outline-width xác định chiều rộng của đường bao. Thuộc tính bao gồm các giá trị:

- thin (thường là 1px)

- medium (thường là 3px)

- thick (thường là 5px)

- Kích thước cụ thể (đơn vị px, pt, cm, em, ...)

Ví dụ:

thuoc tinh outline trong css 7

thuoc tinh outline trong css 8

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh outline trong css 9

1.4 Thuộc tính outline rút gọn

Thuộc tính outline rút gọn thiết lập tất cả các thuộc tính dưới đây trong một khai báo:

- Thuộc tính outline-width.

- Thuộc tính outline-style (bắt buộc).

- Thuộc tính outline-color.

Ví dụ:

thuoc tinh outline trong css 10

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh outline trong css 11

1.5 Thuộc tính outline-offset

Thuộc tính outline-offset xác định khoảng cách giữa đường bao outline và vùng hoặc đường viền của phần tử.

Ví dụ:

thuoc tinh outline trong css 12

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh outline trong css 13

1.6. Các thuộc tính Outline trong CSS

Dưới đây là bảng danh sách các thuộc tính Outline trong CSS:

thuoc tinh outline trong css 14

thuoc tinh outline trong css 15

https://thuthuat.taimienphi.vn/thuoc-tinh-outline-trong-css-50606n.aspx
Bài học CSS trên đây Taimienphi.vn vừa giới thiệu cho bạn các thuộc tính Outline trong CSS. Trong các bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn các thuộc tính tùy chỉnh kích thước trong CSS nhé.

Tác giả: Phí Quỳnh Anh     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Thuộc tính định dạng danh sách (list) trong CSS
Thuộc tính padding trong CSS
Thuộc tính border trong CSS, cú pháp và ví dụ minh họa
Tìm hiểu Link trong CSS, cú pháp và ví dụ
CSS là gì?
Từ khoá liên quan:

Thuộc tính Outline trong CSS

, Outline trong CSS, CSS,

SOFT LIÊN QUAN
  • Rapid CSS

    Chỉnh sửa mã nguồn CSS

    Rapid CSS là một trình soạn thảo nâng cao có thể giúp bạn dễ dàng tạo và sửa tập tin định dạng CSS với bất kỳ kích thước và độ phức tạp cao với rất nhiều chức năng trợ giúp như tự động hoàn thành, khảo sát mã và kiểm tra ...

Tin Mới

  • Tìm hiểu Link trong CSS, cú pháp và ví dụ

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về hình ảnh (image) trong CSS. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về link trong CSS.

  • Học thuộc tính cursor trong CSS, có ví dụ

    Trong các bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về thuộc tính padding trong CSS. Bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính cursor trong CSS.

  • Thuộc tính border trong CSS, cú pháp và ví dụ minh họa

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về các thuộc tính định dạng bảng trong CSS. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính border trong CSS.

  • Code Liên Quân Chung Kết APL 2024 cập nhật mới nhất

    Arena of Valor Premier League 2024 (Liên Quân Mobile APL 2024) là sự kiện thể thao được tổ chức tại thủ đô Bangkok, Thái Lan từ ngày 12/06 cho đến 07/07. Nhân dịp đặc biết này, Garena tung ra bộ code Liên Quân Mobile Chung Kết APL 2024 mới tặng fan hâm mộ.