纯html和css实现圆角表格(教学) spiffy corner table
纯html和css实现圆角表格(教学) spiffy corner tableWebsite / 网业
http://www.spiffycorners.com/
Example / 范例
http://www.spiffycorners.com/index.php?sc=spiffy&bg=FFFFFF&fg=b20000&sz=5px
CSS Code / 代码<style type="text/css">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#b20000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #dd9191;
border-right:1px solid #dd9191;
background:#c53f3f}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #f7e5e5;
border-right:1px solid #f7e5e5;
background:#c03030}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #c03030;
border-right:1px solid #c03030;}
.spiffy4{
border-left:1px solid #dd9191;
border-right:1px solid #dd9191}
.spiffy5{
border-left:1px solid #c53f3f;
border-right:1px solid #c53f3f}
.spiffyfg{
background:#b20000}
</style>HTML Code / 代码<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
<!-- content goes here 内容贴这里 -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
页:
[1]