悬停时围绕div旋转

Question

我有一个太阳形div.我只想在悬停边框和对象之间的透明间隙悬停时显示边框.

首先,我尝试使用盒子阴影,但不能产生白色间隙.它需要纯色,然后我尝试这种方式.但差距并没有出现.

这是我的代码.

    .sun-quote-pages{
      border-radius: 50%;
        background-color: #f4953b;
        width: 4.1em;
        height: 4.1em;
        border: 2px solid transparent;
        transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
    }
    
    .sun-quote-pages:hover {
         transform: scale(1.3);
        border: 2px solid #f4953b;
        margin: 2px;
        padding: 2px; 
    }
    
    
    .wrapper{
      margin-left:150px;
      margin-top:50px;
    }

    <div class="wrapper">
      <div class="sun-quote-pages">   
      </div> 
    </div>

我在这里错过了什么？

的jsfiddle

Answer 1

解决方案是在这里找到的'background-clip':

https://css-tricks.com/transparent-borders-with-background-clip/

有了它,您可以防止背景颜色在边框和填充下流动.它得到广泛支持:

https://caniuse.com/#search=background-clip

所以你的CSS会变成:

.sun-quote-pages{
  border-radius: 50%;
    background-color: #f4953b;
    width: 4.1em;
    height: 4.1em;
    padding: 2px; 
    border: 2px solid transparent;
    background-clip: content-box;
    transition: transform 0.5s ease, border 0.5s ease;
}

.sun-quote-pages:hover {
    border: 2px solid #f4953b;
    transform: scale(1.3);
}


.wrapper{
  margin-left:150px;
  margin-top:50px;
}

请参阅:https://jsfiddle.net/auzjv4rp/11

或者为什么没有双边框？

请参阅:https://jsfiddle.net/auzjv4rp/13