單選框的小圓點不圓問題

單選框的小圓點不圓問題

當我們有時候會做移動端的項目，使用到單選框的話，單選框的小圓點樣式代碼如下：

.circle {
  display: inline-block;
  width:16px;
  height:16px;
  border: 1px solid #e0e0e0;
  border-radius:50%;
}

這樣寫其實是沒有問題的，但是如果項目需要將px等單位整體進行轉換成VM等單位的時候，就會因爲換算的精度問題，導致有的小圓點不圓的問題。如何解決呢？

.circle {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 1px solid #e0e0e0;
  border-radius:50%;
  transform:scale(.5);
  transform-origin: 0% center;
  vertical-align:middle;
}

樣式改爲上述所示，問題就解決了～