bordercolorlight,bordercolordark的CSS实现

本文介绍如何使用CSS来模拟IE特有的bordercolorlight和bordercolordark属性,实现表格边框的明暗效果。这种方法可以让非IE浏览器也能展现相同视觉效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在 IE 中可以对 table 使用 border + bordercolordark + bordercolorlight 来实现表格边框的明暗效果。但要通过对应的 css 样式定义来实现这种效果,并没有直接的相应属性可用(何况这是IE独有属性)。下面的代码将通过CSS来实现这种效果,在IE外的浏览器里也可以成功实现。

bordercolorlight 属性 :亮边框颜色,设置左上边框和单元格右下边框颜色。
bordercolordark 属性: 暗边框颜色,设置右下边框颜色和单元格左上边框。

只需把你原来的bordercolorlight ,bordercolordark 属性值设置成对应CSS样式,如下:

bordercolorlight =#EBEAEE,bordercolordark =#FFFFFF

<style type="text/css">  
TABLE.colorTest{  
    border-top: 1px solid #EBEAEE;   
    border-left: 1px solid #EBEAEE;   
    border-right: 0px;   
    border-bottom: 0px;   
}  
.colorTest TD {  
    border-top: 1px solid #FFFFFF;   
    border-left: 1px solid #FFFFFF;   
    border-right: 1px solid #EBEAEE;   
    border-bottom: 1px solid #EBEAEE;  
}  
</style>  
<table class="colorTest"  
 cellpadding="1" cellspacing="0">  
<tbody>  
<tr bgcolor="#EEEEEE">  
<td>www.</td>  
<td>zeali.</td>  
<td>net</td>  
</tr>  
<tr bgcolor="#DADADA">  
<td>www.</td>  
<td>zeali.</td>  
<td>net</td>  
</tr>  
</tbody>  
</table>  
转载自:   http://www.zeali.net/entry/412

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值