14/08/2018, 12:10

Thuộc tính outline trong CSS

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: 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 ...

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:

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-awidth trong CSS

Thuộc tính outline-awidth 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-awidth 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-awidth trong CSS.

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

Kết quả là:

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à:

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-awidth:thin; outline-style:solid;">
      Outline co do rong thin va hinh dang la solid.
      </p>
      <br />
      
      <p style="outline-awidth:thick; outline-style:dashed;">
      Outline co do rong thick va hinh dang la dashed.
      </p>
      <br />
      
      <p style="outline-awidth:5px;outline-style:dotted;">
      Outline co do rong la 5px va hinh dang la dotted.
      </p>
   </body>
   
</html>

Kết quả là:

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-awidth: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-awidth: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-awidth: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à: