[Code] CSS khung viền cơ bản

(Học là chính, bài này không dành cho các chuyên gia lập trình web)
Với CSS ta có 8 kiểu khung viền cơ bản đó là: Groove, Double, Solid, Ridge, Dashed, Dotted, Outset và Inset

Code:

[font=Courier New]<table><tr>

<td width="120" align="center">
<div style="background-color: #E9E9E9; border: 8px solid #D96C00;">
<font color="#0000A0">
<br><b>Solid </b><br><br>
</font>
</div>
<br>

<div style="background-color: #E9E9E9; border: 8px Double #D96C00;">
<font color="#0000A0">
<br><b>Double </b><br><br>
</font>
</div>
<br>

<div style="background-color: #E9E9E9; border: 8px Groove #D96C00;">
<font color="#0000A0">
<br><b>Groove  </b><br><br>
</font>
</div>
<br>

<div style="background-color: #E9E9E9; border: 8px Ridge #D96C00;">
<font color="#0000A0">
<br><b>Ridge </b><br><br>
</font>
</div>
<br>
</td>

<td width="120" align="center">

<div style="background-color: #E9E9E9; border: 8px dashed #D96C00;">
<font color="#0000A0">
<br><b>dashed </b><br><br>
</font>
</div><br>

<div style="background-color: #E9E9E9; border: 8px Dotted #D96C00;">
<font color="#0000A0">
<br><b>Dotted </b><br><br>
</font>
</div><br>

<div style="background-color: #E9E9E9; border: 8px Inset #D96C00;">
<font color="#0000A0">
<br><b>Inset </b><br><br>
</font>
</div>
<br>

<div style="background-color: #E9E9E9; border: 8px Outset #D96C00;">
<font color="#0000A0">
<br><b>Outset </b><br><br>
</font>
</div>
<br>

</td></tr></table>

[/font]

Từ 8 kiểu này ta có thể kết hợp chúng với nhau để được muôn trùng kiểu tùy theo ý thích. Ví dụ chỉ dùng mỗi kiểu solid nhưng thay đổi màu, ta được khung 3d:

Code:

[font=Courier New]<table><tr>
<td width="300" align="center"><div style="background-color: #FFFFE0">

<div style="background-color: #FFFFE0">
<div style="border:2px solid #8B814C">
<div style="border:2px solid #CDBE70">
<div style="border:2px solid #EEDC82">
<div style="border:2px solid #FFEC8B">
<div style="border:2px solid #FFF68F">
<div style="border:2px solid #FFEC8B">
<div style="border:2px solid #EEDC82">
<div style="border:2px solid #CDBE70">
<div style="border:2px solid #8B814C">

<p align="center">
<big>
<b>
<font>Kết hợp nhiều khung </font>
</b>
</big>
</p>
</div></div></div></div></div></div></div></div></div></div>

</b>
</big>
</p>
</div></div></div></div></div></div></div>
</td></tr></table>

[/font]