0

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

CSS3 边框半径 - 圆形背景，方形边框

您在左上角看到，深灰色边框不是应有的圆形（当我在同一浏览器中打开页面的正常 HTML 版本时，如下所示。）请注意，CSS 和 HTML在这两种情况下都是相同的，这意味着这不仅仅是“错误应用”样式表的问题。CSS 应该——而且确实——可以工作，只是当我在 Visual Studio 中打开网站时就不行了。为什么会这样？

CSS3 边框半径 - 普通版

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

这是相关的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;
}

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

4

2 回答 2

0

您必须将左上角和右上角的边框半径放在表格本身或具有灰色边框的任何元素上。

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;
}
于 2012-06-14T16:38:21.873 回答
0

我解决了这个问题。如果其他人遇到此问题并发现此问题，则问题在于标准 Visual Studio 模板中自动包含的 normalize.css 文件。在该文件中，table 标记的border-collapse 属性设置为“collapse”。当我禁用它时，问题就消失了。所以这个故事的寓意——或者至少一个故事的寓意——是，如果你将一个边界半径应用于一个有边框的表格单元格，请确保“border-collapse”没有设置为“collapse” , 否则边框不会被圆角。我希望这可以帮助别人。

于 2012-06-14T19:02:30.157 回答