bordercolorlight,bordercolordark的CSS实现

CSS实现表格边框明暗效果

最新推荐文章于 2022-03-20 22:49:09 发布

转载最新推荐文章于 2022-03-20 22:49:09 发布 · 1.9k 阅读

文章标签：

#bordercolordark #bordercolorlight #css #CSS #Css

css 专栏收录该内容

1 篇文章

订阅专栏

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

在 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