border-style: none和border-style:hidden的区别

none:在这种情况下,如果没有设定背景图片,border-width 计算后的值将是 0,即使先前已经指定过它的值。在单元格边框重叠情况下,none 值优先级最低,意味着如果存在其他的重叠边框,则会显示为那个边框。

hidden : 在这种情况下,如果没有设定背景图片,border-width 计算后的值将是 0,即使先前已经指定过它的值。在单元格边框重叠情况下,hidden 值优先级最高,意味着如果存在其他的重叠边框,边框不会显示。

例:

<style>
table{
    margin: 100px 100px;
    border: 1px none skyblue;/*border: 1px hidden skyblue*/
    border-collapse: collapse;/*相邻边被合并*/
}
td{
    border: 1px solid pink;
    width: 100px;
    height: 100px;
}
style>
<body>
    <table>
        <tr><td>111td><td>111td><td>111td><td>111td>tr>
    table>
body>

当table中的border-style设为none时,显示效果为:
border-style: none和border-style:hidden的区别_第1张图片
当table中的border-style设为hidden时,显示效果为:
border-style: none和border-style:hidden的区别_第2张图片

你可能感兴趣的:(css)