css - 用 CSS 模拟边框

Question

当我在具有浅色背景和边框的表格中添加深色背景的 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，不想看到表格的黄色边框。

Answer 1

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

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/并在可选设置下使用“传播”值