css - 边界：开始；只在Firefox中工作

Question

我在此页面上有一个带有以下 css 的表（每个td都有类box）

.box{
    border: 3px outset #959595;
    width:25px;
    height: 25px;
    background-color: #dddddd;
    cursor: pointer;
}

table{
    border-collapse: collapse;
    border-spacing: 0px;
    border: 4px inset #444;
}

我在 Firefox 中得到了我想要的

但在任何其他浏览器中，它似乎并没有像我想要的那样工作

Answer 1

来自MDN 关于border-style(re: outset) 的文档：

显示一个边框，使框以 3D 形式出现，浮雕。它是相反的inset。当应用于border-collapse设置为 的表格单元格时collapsed，此值的行为类似于ridge。

你的表有border-collapse: collapse;，所以它实际上像border-style: ridge在 Firefox 中一样呈现。

设置border-collapse: separate;或设置border-style: ridge;为跨浏览器规范化样式，这些浏览器可能不会更改outset为ridge.