Thuộc tính outline trong CSS

129 lượt xem
Share

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ử. Mời bạn đọc cùng tham khảo tiếp bài viết dưới đây của eLib.VN để tìm hiểu chi tiết thuộc tính Outline trong CSS.

Mục lục nội dung

Thuộc tính outline trong CSS

1. Phân biệt Outline và Border

Nhắc đến Outline có thể khiến một số bạn nhầm lẫn nó với Border, tuy nhiên giữa hai thuộc tính này có các điểm khác nhau khá lớn như sau:

  • Một outline là một đường được vẽ ngay bên ngoài cạnh đường viền của các phần tử. Các Outline không chiếm giữ phần không gian, bởi vì chúng luôn luôn được đặt trên một hộp chứa phần tử.

  • Không giống border, bạn không thể xác định độ rộng, màu và style cho từng cạnh khác nhau bởi vì outline là một đường.

  • Không giống border, outline không thay đổi kích cỡ và vị trí của phần tử.

  • Outline không nhất thiết phải ở dạng hình chữ nhật.
Ghi chú: Các thuộc tính liên quan tới outline không được hỗ trợ bởi IE 6 và Netscape 7.

Liên quan tới outline, trong CSS bạn có thể xác định các thuộc tính sau:

  • Thuộc tính outline-width xác định độ rộng của outline.

  • Thuộc tính outline-style xác định line style cho outline.

  • Thuộc tính outline-color xác định màu của outline.

  • Thuộc tính outline để xác định tất cả thuộc tính của outline trên.

2. Thuộc tính outline-width trong CSS

Thuộc tính outline-width xác định độ rộng của outline. Giá trị của thuộc tính này nên ở dạng độ dài (đơn vị pt, px, cm, …) hoặc một trong các giá trị thin, medium, hoặc thick, khá giống với thuộc tính border-width trong CSS.

Nếu bạn xác định giá trị 0px cho thuộc tính này, tức là bạn đã xác định rằng phần tử này không có outline.

Dưới đây là ví dụ minh họa cách sử dụng thuộc tính outline-width trong CSS.

<html>
   <head>
   </head>
   
   <body>
      <p style="outline-width:thin; outline-style:solid;">
      Thuoc tinh outline co gia tri thin.
      </p>
      <br />
      
      <p style="outline-width:thick; outline-style:solid;">
      Thuoc tinh outline co gia tri thick.
      </p>
      <br />
      
      <p style="outline-width:5px; outline-style:solid;">
      Outline co do rong 5 pixel.
      </p>
   </body>
   
</html>

Kết quả là:

3. Thuộc tính outline-style trong CSS

Sử dụng thuộc tính outline-style giúp bạn có thể xác định line style cho outline (chẳng hạn dạng solid, dotted, hoặc dashed, …). Các giá trị cho thuộc tính này là:

  • none: tức là không có border (tương đương với border-width: 0;).

  • solid: đường viền liền đơn.

  • dotted: đường viền là một dãy các chấm nhỏ.

  • dashed: đường viền là một dãy các đoạn thẳng ngắn.

  • double: đường viền là hai đường dạng solid.

  • groove: đường viền trông giống như được khắc vào trong trang.

  • ridge: đường viền trông ngược với dạng groove.

  • inset: đường viền trông giống như là nó được nhúng vào trong trang.

  • outset: ngược lại với dạng inset.

  • hidden: giống như none.

Ví dụ sau minh họa cách sử dụng thuộc tính outline-style cùng với các giá trị của thuộc tính này trong CSS.

<html>
   <head>
   </head>
   
   <body>
      <p style="outline-width:thin; outline-style:solid;">
      Outline co do rong thin va hinh dang la solid.
      </p>
      <br />
      
      <p style="outline-width:thick; outline-style:dashed;">
      Outline co do rong thick va hinh dang la dashed.
      </p>
      <br />
      
      <p style="outline-width:5px;outline-style:dotted;">
      Outline co do rong la 5px va hinh dang la dotted.
      </p>
   </body>
   
</html>

Kết quả là:

4. Thuộc tính outline-color trong CSS

Để xác định màu cho đường outline, bạn sử dụng thuộc tính outline-color trong CSS. Thuộc tính này có thể nhận các giá trị màu dưới dạng tên màu, Hex Code, … (bạn tham khảo chương Màu trong CSS).

Dưới đây là ví dụ minh họa cách thiết lập màu cho đường outline bởi sử dụng thuộc tính outline-color trong CSS.

<html>
   <head>
   </head>
   
   <body>
      <p style="outline-width:thin; outline-style:solid;outline-color:red">
      Outline co do rong thin, hinh dang la solid va mau la red.
      </p>
      <br />
      
      <p style="outline-width:thick; outline-style:dashed;outline-color:#009900">
      Outline co do rong thick, hinh dang la dashed va mau la green.
      </p>
      <br />
      
      <p style="outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
      Outline co do rong la 5px, hinh dang la dotted va mau la blue.
      </p>
   </body>
   
</html>

Kết quả là:

5. Thuộc tính outline trong CSS

Sử dụng thuộc tính outline trong CSS giúp bạn có thể xác định tất cả các thuộc tính liên quan tới outline đã trình bày ở trên chỉ trong một Style Rule.

Ví dụ minh họa thuộc tính outline trong CSS:

<html>
   <head>
   </head>
   
   <body>
      <p style="outline:thin solid red;">
      Outline co do rong thin, hinh dang la solid va mau la red.
      </p>
      <br />
       
      <p style="outline:thick dashed #009900;">
      Outline co do rong thick, hinh dang la dashed va mau la green.
      </p>
      <br />
      
      <p style="outline:5px dotted rgb(13,33,232);">
      Outline co do rong la 5px, hinh dang la dotted va mau la blue.
      </p>
   </body>
   
</html>

Kết quả là:

Trên đây là bài viết của eLib.VN về thuộc tính outline trong CSS. Qua bài viết này, eLib đã hướng dẫn bạn tìm hiểu về thuộc tính outline trong CSS. Hãy thử nghiệm và ứng dụng nó trong các trường hợp thích hợp bạn nhé.

129 lượt xem
Share
Ngày:10/11/2020 Chia sẻ bởi:
TẢI VỀ XEM ONLINE

CÓ THỂ BẠN QUAN TÂM