css 日历组件（浮雕效果）

效果图：

表格单元格产生斜面效果，每个单元格border四个边设置不同颜色；顶部左边颜色浅，右边和下部颜色深，然后字体在用阴影处理就可以了。

标签说明：

caption:基本用作表格的主题

summary：用来描述表格的内容

<style type="text/css">

table.cal{
border-collapse: separate;
border-spacing:0;
text-align: center;
color:#333;
width:30%;
/*border:1px solid #ccc;*/
}
table.cal th,table.cal td{
/*border:1px solid #ccc; */
margin:0;
padding: 0;
}
.cal caption{
font-size: 1.25em;
padding-top:0.692em;
padding-bottom: 0.692em;
background-color: #d4dde6;
}
.cal caption[rel="prev"]{
float:left;
margin-left: 0.2em;
}
.cal caption[rel="next"]{
float:right;
margin-right: 0.2em;
}
.cal caption a:link,.cal caption a:visited{
text-decoration: none;
color:#333;
padding:0 0.2em;
}
.cal caption a:hover,.cal caption a:active,.cal caption a:focus{
background-color:#6d8ab7;
}
.cal thead th{
background-color:#d4dde6;
border-bottom:1px solid #a9bacb;
font-size: 0.875em;
}
.cal tbody{
color:#a4a4a4;
text-shadow:1px 1px 1px white;
background-color:#d0d9e2;
}
.cal tbody td{
border-top:1px solid #e0e0e1;
border-right:1px solid #9f9ff1;
border-bottom:1px solid #acacad;
border-left:1px solid #dfdfe0;
}
.cal tbody a{
display:block;
text-decoration: none;
color:#333;
background-color: #c0c8d2;
font-weight: bold;
padding:0.385em 0.692em 0.308em 0.692em;
}
.cal tbody a:hover,.cal tbody a:focus,.cal tbody a:active,.cal tbody .selected a:link,.cal tbody .selected a:visited,.cal tbody .selected a:hover,.cal tbody .selected a:focus,.cal tbody .selected a:active{
background-color:#6d8ab7;
color:white;
text-shadow:1px 1px 2px #22456b;
}
.cal tbody td:hover,.cal tbody td.selected{
border-top:1px solid #2a3547;
border-right:1px solid #465977;
border-bottom:1px solid #576e92;
border-left:1px solid #466080;
}
</style>

 

<table class="cal" summary=" a calendar style date picker">
<caption>
<a href="" rel="prev">&lt;</a> January 2008
<a href="" rel="next">&gt;</a>
</caption>
<colgroup>
<col id="sun"/>
<col id="mon"/>
<col id="tue"/>
<col id="wed"/>
<col id="tur"/>
<col id="fri"/>
<col id="sat"/>
</colgroup>
<thead>
<th scope="col">Sun</th>
<th scope="col">Mon</th>
<th scope="col">Tue</th>
<th scope="col">Wed</th>
<th scope="col">Tur</th>
<th scope="col">Fri</th>
<th scope="col">Sat</th>
</thead>
<tbody>
<tr>
<td class="null">30</td>
<td calss="null">31</td>
<td class="selected"><a href="#">1</a></td>
<td><a href="">2</a></td>
<td><a href="">3</a></td>
<td><a href="">4</a></td>
<td><a href="">5</a></td>
</tr>
<tr>
<td><a href="#">6</a></td>
<td><a href="#">7</a></td>
<td><a href="#">8</a></td>
<td><a href="">9</a></td>
<td><a href="">10</a></td>
<td><a href="">11</a></td>
<td><a href="">12</a></td>
</tr>

</tbody>

</table>