CSS Outline

0
19

Đường viền (Outline )

Đường viền là một đường được vẽ xung quanh các phần tử để làm cho phần tử “nổi bật”.

CSS có các thuộc tính phác thảo sau:

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

Lưu ý: Đường viền khác với viền(border ) ! Không giống như viền, đường viền được vẽ bên ngoài viền của phần tử và có thể chồng lên nội dung khác. Ngoài ra, đường viền KHÔNG phải là một phần của các kích thước của phần tử; tổng chiều rộng và chiều cao của phần tử không bị ảnh hưởng bởi chiều rộng của đường viền.


Kiểu phác thảo CSS

outline-style xác định phong cách của outline, và có thể có một trong các giá trị sau:

  • dotted – Xác định một dàn bài có dấu chấm
  • dashed – Xác định đường viền đứt nét
  • solid – Xác định một phác thảo vững chắc
  • double – Xác định một dàn bài kép
  • groove – Xác định một đường viền 3D có rãnh
  • ridge – Xác định một đường viền 3D
  • inset – Xác định phác thảo nội dung 3D
  • outset – Xác định phác thảo ban đầu 3D
  • none – Không xác định đường viền
  • hidden – Xác định một đường viền ẩn

Ví dụ sau cho thấy các outline-stylegiá trị khác nhau :

Ví dụ:

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;}

Kết quả:

Chiều rộng đường viền

Các outline-widthtài sản quy định cụ thể rộng đường viền, và có thể có một trong các giá trị sau:

  • thin (thường là 1px)
  • medium (thường là 3px)
  • thick (thường là 5px)
  • Một kích thước cụ thể (bằng px, pt, cm, em, v.v.)

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

Ví dụ:

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;
}

Màu đường viền

Các outline-color được sử dụng để thiết lập màu sắc của outline.

Màu có thể được đặt bằng:

  • tên – chỉ định tên màu, như “đỏ”
  • HEX – chỉ định một giá trị hex, như “# ff0000”
  • RGB – chỉ định một giá trị RGB, như “rgb (255,0,0)”
  • HSL – chỉ định một giá trị HSL, như “hsl (0, 100%, 50%)”
  • invert – thực hiện đảo ngược màu sắc (đảm bảo rằng đường viền có thể nhìn thấy, bất kể màu nền)

Ví dụ sau đây cho thấy một số đường viền 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 đường viền màu đen mỏng bên trong đường viền:

Ví dụ:

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;
}

Giá trị HEX

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

Ví dụ:

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

Giá trị RGB

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

Ví dụ:

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

Giá trị HSL

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

Ví dụ:

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

Đảo ngược màu

Ví dụ sau sử dụng outline-color: invert, thực hiện đảo ngược màu sắc. Điều này đảm bảo rằng đường viền có thể nhìn thấy được, bất kể màu nền:

Một đường viền ngược chắc chắn.

Ví dụ:

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

Thuộc tính

  • outline-width
  • outline-style (cần thiết)
  • outline-color

Thuộc tính quy định như 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 cho thấy một số đường viền được chỉ định với thuộc tính tốc ký outline :

Ví dụ:

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

Offset

outline-offset cho biết thêm khoảng trống giữa một phác thảo và cạnh / biên giới của một phần tử. Khoảng trống giữa một phần tử và đường viền của nó là trong suốt.

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

Ví dụ:

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

Ví dụ sau cho thấy rằng khoảng cách giữa một phần tử và đường viền của nó là trong suốt:

Ví dụ:

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

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây