css - 为什么不显示边框？

Question

CSS:

.num{
       z-index:8;
       background-color:#ffd200 ;
       width: 180px;
       height: 47px;
       color: #ffd200;
       border:#ffd200 double 6px; 
       border-radius: 20px;
}

HTML:

<div id="ll">
    <table id="num">
        <tr >
            <td class="num"></td>
            <td class="num"> </td>
        </tr>
    </table>

鉴于该设置，为什么边框不可见？

Answer 1

如果您问为什么看不到边框，那是因为您将边框的颜色(以及文本的颜色，就此而言)设置为与背景颜色相同元素的一部分，所以它只是融入其中。

这是一个jsFiddle为了说明这一点 - 更改边框的颜色使其出现。

将 CSS 修改为如下内容:

.num {
    background-color:#ffd200 ;
    color: #ffd200;
    border: #ffffff double 6px;
}

会导致出现边框。这将创建一个具有橙色背景和白色边框的元素，而不是具有相同橙色边框的橙色背景。