html - Border Radius は div の上部のみを丸めますか?

Question

私は新しい CSS の border-radius 関数をしばらく使用してきましたが、今日は困惑しています! 背景画像 (120px x 60px) があり、境界線の半径を 5px に設定しましたが、上の 2 つの角だけが丸められていますか?!

私が使用しているCSSコードは次のとおりです。

#buttonRow {
    position:relative;
    width:980px;
    height:60px;
    margin-left:51px;
    margin-bottom:25px;
    float:left;
}

#button {
    position:relative;
    float:left;
    width:120px;
    height:60px;
    margin-left:25px;
    padding-top:10px;
    border-radius:5px;
    background-image:url('../assets/buttons/generic_button.png');
    background-repeat:no-repeat;
}

#singleLineButton {
    position:relative;
    float:left;
    width:120px;
    height:60px;
    margin-left:25px;
    padding-top:20px;
    border-radius:5px;
    background-image:url('../assets/buttons/generic_button.png');
    background-repeat:no-repeat;
}

#buttonText {
    width:120px;
    height:auto;
    color:#FFFFFF;
    text-align:center;
    font-size:16px;
    font-family: Adobe Kaiti Std R;
}

出力は次のとおりです。

上部の角だけが丸みを帯びているのはなぜですか?!

どんな助けでも大歓迎です！

ありがとう、ズールー

編集

質問者向けの HTML は次のとおりです。

<div id="buttonRow">
    <a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php">
        <div id="button"><div id="buttonText">Individual Table Management</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php">
        <div id="singleLineButton"><div id="buttonText">Attendance</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php">
        <div id="singleLineButton"><div id="buttonText">School Members</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php">
        <div id="singleLineButton"><div id="buttonText">Search</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php">
        <div id="singleLineButton"><div id="buttonText">School Details</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php">
        <div id="singleLineButton"><div id="buttonText">Users</div></div>
    </a>
</div>

Answer 1

画像の長さが足りず、下部の丸みを帯びた角が見えない可能性があります。実は今日、それに遭遇しました。

背景色を設定するだけで、問題が何であるかがわかりました。したがって、CSS を次のように変更するだけです。

background-image: #00ff00 url('../assets/buttons/generic_button.png');

また：

background-color: #00ff00; /* bright green for contrast */
background-image: url('../assets/buttons/generic_button.png');

少なくとも、画像が領域全体をカバーしているかどうかがわかり、そこから何をすべきかがわかります。

Answer 2

ほとんどの場合、ボトムはオーバーフローから切り離されています。包含要素がこれらの高さに対応するのに十分な高さであることを確認するか、すべての祖先のオーバーフローを に設定してoverflow: visibleください。

また、csfiddle.net を使用して、CSS だけを公開するのではなく、実際のサンプルを投稿してください。CSS にはコンテキストが必要です。

Answer 3

前に答えたように、あなたの画像は十分な大きさではありません。div は画像に合わせて 120x60px ですが、10px のパディングトップがあり、これにより div のサイズが合計 120x70px に拡張されます。丸めを表示するには大きすぎます。背景画像のサイズを変更するか、div のサイズを 50 ピクセルの高さに変更します。パディングを使用すると、最終的に適切なサイズになります。

Answer 4

CSS3 では、次のようにします。

border-top-right-radius: 8px;
border-top-left-radius: 8px