CSS3 border-radius在Visual Studio项目中的呈现方式与HTML文件中的呈现方式不同

Question

在将我在notepad ++中开发的HTML页面迁移到ASP.NET MVC Web模板时，我遇到了一个奇怪的问题。问题是这样的：我的桌子顶部和底部都有圆角。我在计算机上打开本地文件时看起来很好。但是，当我将HTML页面和CSS一起放入我的ASP.NET MVC项目中的.cshtml文件并通过visual studio渲染页面时，我得到了这个（颜色更改为了更清晰）：

您在左上角看到，深灰色边框不应该是圆形的（就像我在同一浏览器中打开正常HTML版本的页面时一样）。请注意，CSS和HTML在两种情况下都是相同的，这意味着这不仅仅是“missapplied”样式表的问题。 CSS应该 - 并且确实 - 有效，而不是在我在Visual Studio中打开网站时。为什么会这样？

（另请注意，我实际上正在改变实际左上角单元格的顶部单元格的样式，但这不是问题，因为同样的事情发生在所有的其他角落。）

以下是相关的CSS：

/*top left corner*/
table tr:first-child td:first-child + td {
    border-top-left-radius: 20px;
}

/*bottom left corner*/
table tr:last-child td:first-child + td {
    border-left: 3px solid #ddd;
    border-bottom: 3px solid #ddd;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius:20px;
    border-bottom-left-radius:20px;
}

/*top right corner*/
table tr:first-child td:last-child {
    border-right: 3px solid #ddd;
    border-top: 3px solid #ddd;
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-right-radius:20px;
    border-top-right-radius:20px;
}

/*bottom right corner*/
table tr:last-child td:last-child {
    border-right: 3px solid #ddd;
    border-bottom: 3px solid #ddd;
    -moz-border-radius-topleft: 20px;
    -webkit-border-bottom-right-radius:20px;
    border-bottom-right-radius:20px;
}

提前感谢任何提供可能解决方案的人！

Answer 1

您必须将左上角和右上角的半径放在桌子上，或者任何元素都有灰色边框。

table {
 border:3px solid #ddd;
 -webkit-border-top-left-radius: 20px;
 -webkit-border-top-right-radius: 20px;
 -moz-border-radius-topleft: 20px;
 -moz-border-radius-topright: 20px;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
}

/*top left corner*/
table tr:first-child td:first-child + td {
    border-top-left-radius: 20px;
}

/*bottom left corner*/
table tr:last-child td:first-child + td {
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius:20px;
    border-bottom-left-radius:20px;
}

/*top right corner*/
table tr:first-child td:last-child {
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-right-radius:20px;
    border-top-right-radius:20px;
}

/*bottom right corner*/
table tr:last-child td:last-child {
    -moz-border-radius-topleft: 20px;
    -webkit-border-bottom-right-radius:20px;
    border-bottom-right-radius:20px;
}

Answer 2

我弄明白了这个问题。如果其他人遇到此问题并发现此问题，则问题在于标准visual studio模板中自动包含的normalize.css文件。在该文件中，border-collapse属性设置为表标记的“折叠”。当我禁用它时，问题就消失了。因此，故事的寓意 - 或至少是故事的一个道德 - 是，如果您将边界半径应用于带边框的表格单元格，请确保“边框折叠”不设置为“collapse”，否则边框不会被舍入。我希望这有助于某人。