用 CSS 模拟边框答案

【问题标题】：Simulate borders with CSS用 CSS 模拟边框
【发布时间】：2014-12-07 09:50:50
【问题描述】：

当我在带有浅色背景和边框的表格中添加带有深色背景的 td 元素时，我希望在深色 td 元素中，表格的边框看不到。

例如：

table {
    border: 1px solid yellow;
    width: 40%;
    border-spacing: 0;
}

td {
    padding: 10px;
}

td.black {
    background: #000;
    color: #fff;
}

<table>
    <tr>
        <td class="black">Something</td>
    </tr>
    <tr>
        <td>Something else</td>
    </tr>
</table>

第一个td，暗td，不想看到table的黄色边框。

【问题讨论】：

那么，为.black 元素类中的单元格删除边框或更改边框颜色？
我想要表格的边框，但要为深色 td 元素定制一个边框，这样：jsfiddle.net/arc2jg49（但这样我使用 div 元素）。如果我为黑色元素类添加边框颜色，表格的边框仍然存在

标签： css border html-table

【解决方案1】：

您不能，但您可以将边框添加到默认的 'table' 元素中的 'td' 元素，并为黑色元素创建一个特殊规则。

table {
width: 40%;
border-spacing: 0;
/* border-collapse: collapse; // get a single border */
}

td {
padding: 10px;
border: 2px solid yellow;
 }

td.black {
background: #000;
color: #fff;
border: 2px solid green;
}

http://jsfiddle.net/pr1d3c5b/

如果你只想添加一个盒子阴影，你可以试试这个变体（红色），但这并不精确

    -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 0, 0, 1); 
  -moz-box-shadow: 0px 0px 0px 2px rgba(255, 0, 0, 1);
 box-shadow: 0px 0px 0px 2px rgba(255, 0, 0, 1);

http://jsfiddle.net/pr1d3c5b/1/

你可以试试这个生成器http://css3gen.com/box-shadow/ 并在可选设置下使用'spread'值

【讨论】：

带盒子阴影？我能做些什么吗？还是大纲？