🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Cafedev chia sẻ cho ace về Outline như set màu, chiều rộng, cách viết gọn trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.

1. Outline trong CSS là gì?

Đường viền(Outline) là một đường được vẽ xung quanh các phần tử, BÊN NGOÀI các đường viền, để 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(Outline) khác với đường viền(border)! Không giống như đường viền(border), đường viền(Outline) được vẽ bên ngoài đường viền(border) 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.(Outline)

2. Outline Style

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

  • dotted – Tạo đường viền có dấu chấm
  • dashed – Tạo đường viền đứt nét
  • solid – Tạo một đường viền chắc chắn
  • double – Tạo đường viền kép
  • groove – Tạo đường viền có rãnh 3D
  • ridge – Tạo đường viền 3D
  • inset – Tạo đường viền 3D inset
  • outset – Tạo phác thảo 3D outset
  • none có – Không Tạo đường viền
  • hidden – Tạo đường viền ẩn

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

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;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>
</html>

Copy and chạy code

Lưu ý: Không có thuộc tính outline nào khác (mà bạn sẽ tìm hiểu thêm trong các chương tiếp theo) sẽ có BẤT CỨ hiệu ứng nào trừ khi thuộc tính outline-style được đặt!

3. Chiều rộng của Outline

Thuộc tính outline-width chỉ định chiều rộng của đườ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ụ:

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>The outline-width Property</h2>

<p class="ex1">A thin outline.</p>
<p class="ex2">A medium outline.</p>
<p class="ex3">A thick outline.</p>
<p class="ex4">A 4px thick outline.</p>

</body>
</html>

Copy and chạy code

4. Đặt màu cho Outline

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

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

  • name – chỉ định tên màu, như “red”
  • 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ụ:

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The outline-color property is used to set the color of the outline.</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset grey outline.</p>

</body>
</html>

Copy and chạy code

5. Cách viết ngắn gọn cho 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 (yêu cầu cần 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ụ:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>

<h2>The outline Property</h2>

<p class="ex1">A dashed outline.</p>
<p class="ex2">A dotted red outline.</p>
<p class="ex3">A 5px solid yellow outline.</p>
<p class="ex4">A thick ridge pink outline.</p>

</body>
</html>

Copy and chạy code

6. Đặt Offset cho Outline

Thuộc tính outline-offset thêm khoảng cách giữa đường viền và cạnh / đường viền 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.

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>

<h2>The outline-offset Property</h2>

<p>This paragraph has an outline 15px outside the border edge.</p>

</body>
</html>

Full series tự học CSS từ cơ bản tới nâng cao.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM