CSS3边界半径在Visual Studio项目中的呈现方式与HTML文件中的呈现方式不同

Question

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

您会在左上角看到，暗灰色的边框不是应该的圆角（以及当我在如下所示的同一浏览器中打开页面的常规HTML版本时的样子）。 请注意，CSS和HTML在两种情况下都是相同的，这意味着这不仅仅是“未应用”样式表的问题。 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”。 禁用此功能后，问题消失了。 所以，这个故事的寓意-或故事的至少一个道德-是，如果你正在申请的边界半径表格单元格具有边框，确保“边界崩溃” 未设置为“崩溃” ，否则边框将不会四舍五入。 我希望这可以帮助别人。