0

notepad++で開発していたHTMLページをASP.NETMVCWebテンプレートに移行するときに、奇妙な問題が発生しました。問題はこれです：私は上下に丸い角を持つテーブルを持っています。コンピューターでローカルファイルを開いたときは問題なく見えました。ただし、HTMLページをCSSとともにASP.NET MVCプロジェクトの.cshtmlファイルに配置し、Visual Studioでページをレンダリングすると、次のようになります（わかりやすくするために色が変更されました）。

CSS3 Border Radius-丸い背景、正方形の境界線

左上にあるように、濃い灰色の境界線が本来のように丸くないことがわかります（そして、以下に示すように、同じブラウザでページの通常のHTMLバージョンを開いたときのように）。CSSとHTMLに注意してください。どちらの場合も同じです。つまり、これは単に「誤って適用された」スタイルシートの問題ではありません。CSSは、Visual StudioでWebサイトを開いたときだけでなく、機能するはずです。なぜこうなった？

CSS3BorderRadius-通常バージョン

（実際には、実際の左上のセルの右上のセルのスタイルを変更していることにも注意してください。ただし、他のすべてのコーナーでも同じことが発生するため、これは問題ではありません。 ）。

関連する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

私は問題を理解しました。他の誰かがこの問題に遭遇し、この質問を見つけた場合、問題は、標準のVisualStudioテンプレートに自動的に含まれるnormalize.cssファイルにあります。そのファイル内で、border-collapseプロパティがテーブルタグの「collapse」に設定されました。これを無効にすると、問題は解消されました。したがって、ストーリーのモラル（またはストーリーの少なくとも1つのモラル）は、境界のあるテーブルセルに境界半径を適用する場合は、「border-collapse」が「collapse」に設定されていないことを確認することです。 、それ以外の場合、境界線は丸められません。これが誰かに役立つことを願っています。

于 2012-06-14T19:02:30.157 に答える