如何删除这个丑陋的边框创建的插入阴影？

Question

如何删除由插入阴影完全重叠的背景创建的这个丑陋边框？嗯，无论如何这就是这个想法。

circle {
  display:block;
  text-decoration:none;
  border-radius:50%;
  width:100px;
  height: 100px;
  background: black;
  text-align:center;
  transition: all 0.8s ease-out;
  box-shadow:inset 0px 0px 0px 50px #ffd300;
  font-size: 0;
  z-index: -1;
  border: 10px solid #ffd300;
}

.circle:hover {
  box-shadow:inset 0px 0px 0px 0px #ffd300;
  transition: all 0.2s ease-out;
}

Code snippet over at Codepen

Answer 1

实际渲染没有解决方案。 （参见下面解释的解决方案）。

相反，我已经玩了并找到了一个修复程序，可能会做一些确切的事情，通过放置一个：after伪元素来完全按照你想要的模仿动画。

点击下面的“ 运行代码段 ”按钮，看看这是否正是您想要的。

.circle {
  display:block;
  text-decoration:none;
  border-radius:50%;
  width:120px;
  height: 120px;
  background: #ffd300;
  text-align:center;
  transition: all 0.8s ease-out;
  font-size: 0;
  z-index: -1;
}

.circle:before {
  display:block;
  content:'';
  position:absolute;
  background:black;
  width:0px;
  height:0px;
  border-radius:50%;
  top:68px;
  left:68px;
  transition: all 0.2s ease-out;
  overflow:hidden;
  z-index: 0;
}

.circle:hover:before {
  width:100px;
  height:100px;
  top:18px;
  left:18px;
  font-size: 48px;
}

.circle:after {
  display:block;
  position:absolute;
  font-size: 48px;
  line-height: 90px;
  color: black;
  transition:  color 0.2s ease-out; 
  content: "J";
  z-index: 1;
  top:18px;
  left:58px;
}

.circle:hover:after {
    color: white;
    transition:  color 0.1s ease-out;
}

<a class="circle" href="#">Click</a>

---

问题解释
 我已经粘贴了两张关于如何在Webkit（Chrome）和Gecko（Firefox）中呈现它们的图像。如果弯曲，阴影会沿着边缘像素化。绘制曲线时也会出现相同的现象。

---

图片1，Chrome
这是您使用的相同代码的500px x 500px，只是为了放大我们正在谈论的效果。你可以在更好的视野中看到那些奇怪的丑陋边框。现在，尝试将border-radius:50%;减少到20％，10％或0％，你会慢慢看到那些丑陋的痕迹消失。由于像素本身是方形的，因此在矩形形状/具有直线边缘的情况下呈现完美。
图片2，Firefox
在第二张图片中，您可以看到Firefox如何渲染相同的对象（500px x 500px），并在圆圈的外边缘添加辅助未知边框，实际上是背景：黑色，走出10px边框（证明：将背景更改为＃ffd300，它将消失）。

---

总而言之，这种混叠现象是目前主要浏览器引擎的渲染问题，尽管它在圆形对象本身的实际渲染中最小化，但在阴影或其他颜色模糊/混合的情况下更为突出。但是你的代码不是问题。

Answer 2

形状的背景颜色为黑色，黄色外边框为10px，黄色内边框为50px。这似乎是这样，当你悬停时，它会将圆圈内部改为红色。

要完全摆脱小条子，你可以将.circle的{​​{1}}改为background（或其他）。

这会破坏动画，因此您可能希望将#ffd300添加到background:black。

Answer 3

您可以将CSS更改为：

.circle {
  display:block;
  text-decoration:none;
  border-radius:50%;
  width:100px;
  height: 100px;
  background: #ffd300;
  text-align:center;
  transition: all 0.8s ease-out;
  box-shadow:inset 0px 0px 0px 50px #ffd300;
  font-size: 0;
  z-index: -1;
  border: 10px solid #ffd300;
}

.circle:hover {
  box-shadow:none;
  background: black;
  transition: all 0.2s ease-out;
}

基本上，将后台背景移动到hover状态并摆脱box-shadow。当然，你会在悬停时设置边框，因为它与你的方法一致，但至少你不会让边框处于默认状态。

请记住，您可以通过简单地用逗号分隔它们来使用多个框阴影，但无论哪种方式，无论添加多少，都会有这个边框，因为border-radius:50%会添加它。作为参考，请尝试取消border-radius定义，然后您会看到边框消失。

简而言之：在任何时候摆脱边框的唯一方法是使用2个元素：背景颜色为#ffd300的外部div和背景颜色为#000的内部div J，否则你将拥有那个边界，这就是CSS的工作原理

Answer 4

如果您向CSS添加border-width: 0px;。见http://www.w3schools.com/cssref/pr_border-width.asp