边框为什么没有显示？

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;
}

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

Answer 2

如果边框颜色与背景颜色不同，您可以看到边框！