悬停时在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

解决方案是在此处找到“背景剪辑”：

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

Answer 2

.sun-quote-pages:hover {
         transform: scale(1.3);
       
    }
	.sun-quote-pages:hover::after {
        border: 2px solid #f4953b;
       
    }
	
	.sun-quote-pages{
	width: 4.1em;
	height: 4.1em;
	margin: 20px auto;
	border-style: ridge;
	border: 2px solid transparent;
	border-spacing:10px;
	border-radius: 50%;
	position:relative;
	background-color: #f4953b;
	transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
	}
	.sun-quote-pages:after {
	  content: '';
	  position: absolute;
	  top: -10px;
	  left: -10px;
	  right: -10px;
	  bottom: -10px;
	  border: 2px solid transparent;
	  border-radius: 50%;
	  }

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

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

尝试一下。

Answer 3

尝试一下

.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;
    position:relative;
    box-sizing: border-box;
}

.sun-quote-pages:hover {
border: solid 2px #f4953b;
  padding: 5px;
  background-clip: content-box; /* support: IE9+ */
  background-color: #f4953b;
  transform: scale(1.3);
}
.wrapper{
  margin-left:150px;
  margin-top:50px;
}

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

提琴：https://jsfiddle.net/fpow9ahc/

Answer 4

您可以像使用:before属性那样实现。     添加以下CSS并尝试：

.sun-quote-pages:before{
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;  
    border-radius: 50%;
}

.sun-quote-pages:hover:before {
    border: 2px solid #f4953b;
}

请参见JSfiddle：https://jsfiddle.net/qsb6y0rc/75/

Answer 5

您可以使用sun，background-color和shadow用border创建width: 0

<div class="sun"></div>

.sun {
    background-color: #f4953b;
    height: 80px;
    width: 80px;
    box-sizing: border-box;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #f3f5f6 inset;
    border: solid 0 #f4953b;
    transition: border-width 0.3s linear;
}

然后将鼠标悬停，只需为border-width设置动画：

.sun:hover {
    border-width: 3px;
}

这是工作中的demo：

Answer 6

您可以使用css伪选择器:after，其大小大于原始元素。将此元素设置为transparent背景，并与原始元素设置相同的边框颜色，如下所示：

body {
  background: gray;
}

.sun-quote-pages{
  border-radius: 50%;
  background-color: #f4953b;
  width: 70px;
  height: 70px;
  transition: transform 0.5s ease, background 0.5s ease;
}

.sun-quote-pages::after {
  content: "\00a0";
  display: block;
  background: transparent;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  border:2px solid #f4953b;
  opacity: 0;
  box-sizing: border-box;
  transition: opacity 0.5s ease 0.5s;
  transform: translate(-5px,-5px);
}

.sun-quote-pages:hover {
  transform: scale(1.3);
}

.sun-quote-pages:hover::after {
  opacity: 1;
}

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

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

Answer 7

这里是使用radial-gradient

的想法

.sun-quote-pages {
  border-radius: 50%;
  background:
   radial-gradient(circle at center,#f4953b 54%,transparent 56%,transparent 65%,#f4953b 66%);
  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);
  background-color:transparent;
}

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

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