CSS Outline

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    4 thg 11, 2022

  • Số lượt xem

    335 lượt xem


CSS Outline là đường viền bên ngoài các element, tuy nhiên khác với border, outline nằm bên ngoài border và có thể đè lên các outline của các element khác.

CSS Outline

Outline là một đường được vẽ xung quanh các element, BÊN NGOÀI các border, để làm cho element "nổi bật".

CSS outline có các thuộc tính sau:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Lưu ý: Outline khác với border! Không giống như border, outline được vẽ bên ngoài border của element và có thể chồng chéo nội dung khác. Ngoài ra, outline không phải là một phần của kích thước element; Tổng chiều rộng và chiều cao của element không bị ảnh hưởng bởi chiều rộng của outline.

CSS Outline Style

Thuộc tính outline-style chỉ định kiểu của outline và có thể có một trong các giá trị sau:

  • dotted - Xác định đường viền có dấu chấm
  • dashed - Xác định đường viền đứt nét
  • solid -  Xác định một đường viền vững chắc
  • double - Xác định đường viền kép
  • groove - Xác định đường viền có rãnh 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • ridge - Xác định đường viền 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • inset - Xác định đường viền in 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • outset - Xác định đường viền ban đầu 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • none - Xác định không có đường viền
  • hidden - Xác định một đường viền ẩn

Ví dụ sau đây cho thấy các giá trị outline-style nhau:

p.dotted {outline-style: dotted;}  p.dashed {outline-style: dashed;}  p.solid {outline-style: solid;}  p.double {outline-style: double;}  p.groove {outline-style: groove;}  p.ridge {outline-style: ridge;}  p.inset {outline-style: inset;}  p.outset {outline-style: outset;}

dotted outline.

dashed outline.

solid outline.

double outline.

groove outline

ridge outline

inset outline

outset outline

CSS Outline Width

Thuộc tính outline-width chỉ định chiều rộng của outline và có thể có một trong các giá trị sau:

  • thin (1px)
  • medium (3px)
  • thick (5px)
  • Cụ thể (đơn vị: px, pt, cm, em, vv)

Ví dụ sau đây cho thấy một số outline có độ rộng khác nhau:

thin outline.

medium outline.

thick outline.

4px thick outline.

p.ex1 {    border: 1px solid black;    outline-style: solid;    outline-color: red;    outline-width: thin;  }    p.ex2 {    border: 1px solid black;    outline-style: solid;    outline-color: red;    outline-width: medium;  }    p.ex3 {    border: 1px solid black;    outline-style: solid;    outline-color: red;    outline-width: thick;  }    p.ex4 {    border: 1px solid black;    outline-style: solid;    outline-color: red;    outline-width: 4px;  }

 

CSS Outline Color

Thuộc tính outline-color được sử dụng để đặt màu của đường viền.

  • Tên màu - ví dụ như "red"
  • Giá trị HEX - ví dụ như "# ff0000"
  • Giá trị RGB - ví dụ như "rgb (255,0,0)"
  • invert - thực hiện đảo màu (đảm bảo rằng đường viền có thể nhìn thấy được, bất kể màu nền là gì)

Ví dụ sau đây cho thấy một số outline khác nhau với các màu sắc khác nhau. Cũng lưu ý rằng các yếu tố này cũng có một border mỏng màu đen bên trong outline:

solid red outline.

dotted blue outline.

outset grey outline.

p.ex1 {    border: 2px solid black;    outline-style: solid;    outline-color: red;  }    p.ex2 {    border: 2px solid black;    outline-style: dotted;    outline-color: blue;  }    p.ex3 {    border: 2px solid black;    outline-style: outset;    outline-color: grey;  }

HEX Values

Màu của outline cũng có thể được chỉ định bằng giá trị thập lục phân (HEX):

p.ex1 {    outline-style: solid;    outline-color: #ff0000; /* red */  }

RGB Values

Hoặc bằng cách sử dụng các giá trị RGB:

p.ex1 {    outline-style: solid;    outline-color: rgb(255, 0, 0); /* red */  }

HSL Values

Bạn cũng có thể sử dụng các giá trị HSL:

p.ex1 {    outline-style: solid;    outline-color: hsl(0, 100%, 50%); /* red */  }

 

CSS Outline - Shorthand property

Thuộc tính outline là một thuộc tính viết tắt để đặt các thuộc tính outline riêng lẻ sau:

  • outline-width
  • outline-style (bắt buộc)
  • outline-color

Thuộc tính outline được chỉ định dưới dạng một, hai hoặc ba giá trị từ danh sách ở trên. Thứ tự của các giá trị không quan trọng.

Ví dụ sau đây cho thấy một số outline được chỉ định với thuộc tính outline shorthand:

dashed outline.

dotted red outline.

5px solid yellow outline.

thick ridge pink outline.

p.ex1 {outline: dashed;}  p.ex2 {outline: dotted red;}  p.ex3 {outline: 5px solid yellow;}  p.ex4 {outline: thick ridge pink;}

 

CSS Outline Offset

Thuộc tính outline-offset thêm khoảng cách giữa đường viền và cạnh / outline của một element. Khoảng cách giữa một element và outline của nó là trong suốt.

Ví dụ sau chỉ định một đường viền 15px bên ngoài cạnh outline:

Đoạn văn này có outline 15px ngoài mép border.

p {    margin: 30px;    border: 1px solid black;    outline: 1px solid red;    outline-offset: 15px;  }

Ví dụ sau đây cho thấy rằng khoảng cách giữa một element và outline của nó là trong suốt:

Đoạn văn này có outline 15px ngoài mép border.

p {    margin: 30px;    background: yellow;    border: 1px solid black;    outline: 1px solid red;    outline-offset: 15px;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.