我有一个没有背景、只有边框的圆圈，我希望它在悬停时缩放:
<!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>
这是一个 fiddle :https://jsfiddle.net/u36nfxs0/2/
如您所见，问题在于边框的宽度也会缩放。有什么方法可以缩放保持其边框宽度的圆圈？
谢谢!
最佳答案
不要使用转换，而是调整尺寸(宽度、高度和显式边距:
#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>关于css - 在悬停时缩放一个圆圈，保持边框的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46370819/