html+css做圆角表格

7 篇文章 0 订阅
marginwidth="0" marginheight="0" src="http://218.16.120.35:65001/PC/Global/images/b.html" frameborder="0" width="728" scrolling="no" height="90">

方法一
阅读代码编辑代码运行效果复制HTML代码保存代码<html><head>
    <title>css圆角效果</title>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <style type="text/css">

div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

</style>
</head><body>
<div class="RoundedCorner">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
    </b></b><br>
    无图片实现圆角框<br>
    <br>
    <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
    </b></b>
</div>
</body></html><html><head>
    <title>css圆角效果</title>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head><body>
<div class="RoundedCorner">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
    </b></b><br>
    无图片实现圆角框<br>
    <br>
    <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
    </b></b>
</div>
</body></html>


方法二
阅读代码编辑代码运行效果复制HTML代码保存代码<table style="table-layout: fixed" height="28" cellspacing="0" cellpadding="0" width="100%"
    border="0">
<tbody>
<tr height="3" width="100%">
    <td>
        <table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
            border="0">
        <tbody>
        <tr height="1">
            <td width="1"></td>
            <td width="1"></td>
            <td width="1"></td>
            <td bgcolor="#908a47"></td>
            <td width="1"></td>
            <td width="1"></td>
            <td width="1"></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td bgcolor="#f7f8f9"></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47"></td>
            <td bgcolor="#f7f8f9" colspan="3"></td>
            <td bgcolor="#908a47"></td>
            <td></td>
        </tr>
        </tbody>
        </table>
    </td>
</tr><tr>
    <td>
        <table style="table-layout: fixed" height="100%" cellspacing="0" cellpadding="0"
            border="0">
        <tbody>
        <tr>
            <td width="1" bgcolor="#908a47"></td>
            <td id="oINNER" bgcolor="#f7f8f9">  </td>
            <td width="1" bgcolor="#908a47"></td>
        </tr>
        </tbody>
        </table>
    </td>
</tr><tr height="3" width="100%">
    <td>
        <table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
            border="0">
        <tbody>
        <tr height="1">
            <td width="1"></td>
            <td width="1" bgcolor="#908a47"></td>
            <td width="1" bgcolor="#f7f8f9"></td>
            <td bgcolor="#f7f8f9"></td>
            <td width="1" bgcolor="#f7f8f9"></td>
            <td width="1" bgcolor="#908a47"></td>
            <td width="1"></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td bgcolor="#f7f8f9"></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td></td>
        </tr><tr height="1">
            <td colspan="3"></td>
            <td bgcolor="#908a47"></td>
            <td colspan="3"></td>
        </tr>
        </tbody>
        </table>
    </td>
</tr>
</tbody>
</table><table style="table-layout: fixed" height="28" cellspacing="0" cellpadding="0" width="100%"
    border="0">
<tbody>
<tr height="3" width="100%">
    <td>
        <table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
            border="0">
        <tbody>
        <tr height="1">
            <td width="1"></td>
            <td width="1"></td>
            <td width="1"></td>
            <td bgcolor="#908a47"></td>
            <td width="1"></td>
            <td width="1"></td>
            <td width="1"></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td bgcolor="#f7f8f9"></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47"></td>
            <td bgcolor="#f7f8f9" colspan="3"></td>
            <td bgcolor="#908a47"></td>
            <td></td>
        </tr>
        </tbody>
        </table>
    </td>
</tr><tr>
    <td>
        <table style="table-layout: fixed" height="100%" cellspacing="0" cellpadding="0"
            border="0">
        <tbody>
        <tr>
            <td width="1" bgcolor="#908a47"></td>
            <td id="oINNER" bgcolor="#f7f8f9">  </td>
            <td width="1" bgcolor="#908a47"></td>
        </tr>
        </tbody>
        </table>
    </td>
</tr><tr height="3" width="100%">
    <td>
        <table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
            border="0">
        <tbody>
        <tr height="1">
            <td width="1"></td>
            <td width="1" bgcolor="#908a47"></td>
            <td width="1" bgcolor="#f7f8f9"></td>
            <td bgcolor="#f7f8f9"></td>
            <td width="1" bgcolor="#f7f8f9"></td>
            <td width="1" bgcolor="#908a47"></td>
            <td width="1"></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td bgcolor="#f7f8f9"></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td></td>
        </tr><tr height="1">
            <td colspan="3"></td>
            <td bgcolor="#908a47"></td>
            <td colspan="3"></td>
        </tr>
        </tbody>
        </table>
    </td>
</tr>
</tbody>
</table>

方法三
阅读代码编辑代码运行效果复制HTML代码保存代码<html xmlns:v><head>
    <style>
 
v/:* {behavior: url(#default#VML);}

</style>
</head><body>
<v:roundrect style="position: relative; width: 200; height: 100px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px" />
    <v:textbox style="font-size: 12px">css实现真正的圆角表格</v:textbox>
</v:roundrect>
</body></html><html xmlns:v><head>
    <style>
v/:* {behavior: url(#default#VML);}
</style>
</head><body>
<v:roundrect style="position: relative; width: 200; height: 100px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px" />
    <v:textbox style="font-size: 12px">css实现真正的圆角表格</v:textbox>
</v:roundrect>
</body></html>

方法四

阅读代码编辑代码运行效果复制HTML代码保存代码<html>
<style type="text/css">

.rd{font-family: "宋体";font-size: 14px;height: 12px;width: 12px;margin: 0px;padding: 0px;line-height: 12px;}
#l{filter:DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0);}
#r{filter:DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0);}
.tb{filter:DropShadow(Color=#cccccc,OffX=3,OffY=3);}#cn{font-family:"宋体";font-size: 14px;line-height:24px;}#en{font-family:"Verdana";font-size: 11px;}#ct{filter:DropShadow(Color=#ffffff,OffX=-1,OffY=-1)DropShadow(Color=#6699cc,OffX=1,OffY=1);position:relative;height:40px;}body{overflow:hidden;background:#eeeeee;}

</style>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tb">
<tr>
    <td class="rd" id="l">╭</td>
    <td valign="bottom">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td bgcolor="#000000" height="1"></td>
        </tr><tr>
            <td bgcolor="#00CCFF" height="7"></td>
        </tr>
        </table>
    </td>
    <td class="rd" id="r">╮</td>
</tr><tr>
    <td align="right">
        <table height="52" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="1" bgcolor="#000000"></td>
            <td bgcolor="#00CCFF" width="7"></td>
        </tr>
        </table>
    </td>
    <td bgcolor="#00CCFF" valign="top">
        <div id="ct">
            <label id="en">Fight for the cause of world peace!</label><br />
            <label id="Label1">The importance of a proper diet in maintaining health should not
                be disregarded.</label><br />
            <label id="cn">欢迎进入我们的网站,http://www.cc0773.com/</label>
            <label id="Label2">。</label>
        </div>
    </td>
    <td align="left">
        <table height="52" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td bgcolor="#00CCFF" width="6"></td>
            <td width="1" bgcolor="#000000"></td>
        </tr>
        </table>
    </td>
</tr><tr>
    <td class="rd" id="Td1">╰</td>
    <td valign="top">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td bgcolor="#00CCFF" height="5"></td>
        </tr><tr>
            <td bgcolor="#000000" height="1"></td>
        </tr>
        </table>
    </td>
    <td class="rd" id="Td2">╯</td>
</tr>
</table>
</body></html> 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值