CSS Outline : Tạo đường viền cho khung
Thứ Ba, 5 tháng 5, 2009
[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ả :
Comments[ 0 ]
Đăng nhận xét