Loading post navigation ...
 
 

Pro page

1
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[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ả :




Enter your mail address:

1

Khách (ẩn danh)

5 *



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home