CSS Outline : Tạo đường viền cho khung

[FD' BlOg] - Thuộc tính outline dùng để vẽ đường viền bao quanh một tiện ích nào đó, bạn có thể tùy chỉnh nó, như là : style, màu sắc, độ rộng...

Lưu ý nhỏ là thuộc tính này chỉ hiển thị trên FireFox.

☼ Tìm hiểu cấu trúc của từng lệnh và ví dụ minh họa:

1. Lệnh uotline:
- Cấu trúc :

outline : outline-color outline-style outline-width

Lưu ý: sau lênh không có dấu ";" . outline-color, outline-style, outline-width lần lượt là các thuộc tính màu, style, độ rộng (sẽ hiểu rõ hơn khi đi vào cụ thể từng lệnh).

- Ví dụ:

<html>
<head>
<style type="text/css">
p
{
border: red solid thin;
outline: green dotted thick
}
</style>
</head>
<body>

<p>FD's BlOg - Testing</p>

</body>
</html>

Kết quả :

2. Lệnh outline-color :
- Cấu trúc :

outline-color: #{trị màu}

- Ví dụ:

<html>
<head>
<style type="text/css">
p
{
border: red solid thin;
outline-style: solid;
outline-color: #00ff00
}
</style>
</head>
<body>

<p>FD's BlOg - Testing</p>

</body>
</html>

Kết quả :

3. Lệnh outline-style :
- Cấu trúc :

outline-style: {style}

Với các style:
- none
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
xem ví dụ bên dưới để thấy rõ các style

- Ví dụ:

<html>
<head>
<style type="text/css">
p
{
padding: 0 0 0 15px;
border: red solid thin;
}
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>

<p class="dotted">FD Testing - dotted;</p>

<p class="dashed">FD Testing - dashed</p>

<p class="solid">FD Testing -solid</p>

<p class="double">FD Testing - double</p>

<p class="groove">FD Testing - groove</p>

<p class="ridge">FD Testing - ridge</p>

<p class="inset">FD Testing - inset</p>

<p class="outset">FD Testing - outset</p>
</body>
</html>

Kết quả :

4. Lệnh outline-width :
- Cấu trúc :

outline-width: {thuộc tính}

Với các thuộc tính:
- thin
- medium
- thick
- pixel (ví dụ 5px)

- Ví dụ:

<html>
<head>
<style type="text/css">
p.thick
{
padding: 0 0 0 15px;
border: red solid thin;
outline-style: solid;
outline-width: thick
}
p.pixel
{
padding: 0 0 0 15px;
border: red solid thin;
outline-style: solid;
outline-width: 2px
}
</style>
</head>
<body>

<p class="thick">FD Testing - thick</p>
<p class="pixel">FD Testing - pixel</p>

</body>
</html>

Kết quả :