1

テーブル セル内に 1 つの色で塗りつぶされた円を表示する必要があります。どういうわけか、機能するが確実に機能しない例を見つけました。以下のコードを参照してください。
IE では、円は縦長の楕円形になります。セルの高さが大きい Mozilla でも同じことが起こります。

<!DOCTYPE HTML>
<html>
    <head>
        <title>circle</title>
        <style type="text/css">
            .circle_green { 
                width:1%;
                padding:10px 11px;
                margin:0 auto;
                border:2px solid #a1a1a1;
                border-radius:25px;
                background-color:green;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <tr>
                <td>
                    <div class="circle_green"></div>
                </td>
            </tr>
        </table>
    </body>
</html>
4

4 に答える 4

9

CSSborder-radius:100%の代わりに使用します。border-radius: 25px;

<img />未使用のタグをマークアップから削除します。

ここでは border-radius を使用しているため、ブラウザーが CSS3 仕様をサポートしていることを確認してください。

JS フィドルのデモ

于 2013-05-25T21:35:27.350 に答える
3

これを行うために SVG (スケーラブル ベクター オブジェクト) を作成することもできます。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="41" cy="41" r="40" stroke="#333" stroke-width="1" fill="#800000"/>
</svg>
于 2013-05-25T21:51:23.103 に答える