如何以HTML格式顯示單元格表格中由一種顏色填充的圓圈？

我需要在表格單元格中顯示一個由一種顏色填充的圓。不知何故，我找到了一個可行的例子，但不能可靠地工作。請參閱下面的代碼。
在IE上，圓形變成了一個垂直拉長的橢圓形。 Mozilla的單元格高度更大也會發生同樣的情況。如何以HTML格式顯示單元格表格中由一種顏色填充的圓圈？

<!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>

來源

2013-05-25 Alex Narinsky

這並不對所有的瀏覽器，特別是不與舊的。其中一些人在半徑方面有問題。 – JonathanRomer

也許，但Mozilla也給出了問題 - 需要做垂直對齊 –

Sachin給你正確的答案，在IE半徑使用polyfiller。在td上設置垂直對齊（中間或頂部）以修復你的錯誤 – Philip

使用border-radius:100%，而不是在你的CSS border-radius: 25px;。

並從標記中刪除未使用的<img />標記。

您在此處使用border-radius，因此請確保您的瀏覽器支持CSS3規範。

JS Fiddle Demo

來源

2013-05-25 21:35:27 Sachin

您還可以創建一個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>

http://jsfiddle.net/HNHqy/

來源

2013-05-25 21:51:23

使用相同的寬度，高度和邊界半徑。例如：

 width:25px; 
     height:25px; 
     border-radius:25px;

來源

2013-05-25 22:30:00

這爲我工作：

CSS

.filled-circle { 
    padding: 2px 11px; 
    border-radius: 100%; 
    background-color: #f38e23; 
}

HTML

<span class="filled-circle"></span>

來源

2017-04-05 14:45:27 Sachin1392

如何以HTML格式顯示單元格表格中由一種顏色填充的圓圈？

回答

相關問題