在悬停时缩放一个圆圈，保持边框的宽度答案

【问题标题】：Scale a circle on hover maintaining the width of the border在悬停时缩放一个圆圈，保持边框的宽度
【发布时间】：2017-09-25 02:38:41
【问题描述】：

我有一个没有背景的圆圈，只有边框，我希望它在悬停时缩放：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="css/main.css"  />
    <style>
    #circle{
        border: 1px solid black;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 20% auto;
        transition: all 0.5s ease;
    }
    #circle:hover{
        cursor: pointer;
        transform: scale(6);
        border: 1px solid black;
        transition: all 0.5s ease;
    }
    </style>
</head>
<body>
    <div id="circle">
    </div>
</body>
</html>

这是一个小提琴：https://jsfiddle.net/u36nfxs0/2/

如您所见，问题在于边框的宽度也会缩放。有什么方法可以缩放圆圈以保持其边框的宽度？

谢谢！

【问题讨论】：

标签： css css-transitions css-transforms

【解决方案1】：

不要使用变换，而是调整尺寸（宽度、高度和显式边距：

#circle {
  border: 1px solid black;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 20% auto 0 auto;
  transition: all 5s ease;
}

#circle:hover {
  cursor: pointer;
  width: 240px;
  height: 240px;
  margin-top: calc(20% - 100px);
}

<div id="circle">
</div>

【讨论】：