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

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

形状的背景颜色为黑色，外边框为 10px 黄色，内边框为黄色 50px。好像是这样的，当你悬停的时候，它会把圆圈里面变成红色。

要完全摆脱小条子，您可以将 .circle 的 background 更改为 #ffd300（或其他）。

然而，这会破坏动画，因此您可能需要将 background:black 添加到 .circle:hover。

Answer 2

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

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 和内部 div使用背景颜色 #000 和 J，否则您将拥有该边框，这就是 CSS 的工作方式

Answer 4

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

相反，我玩过并为您找到了一个修复方法，它可能会做正确的事情，通过放置一个 :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)，并沿对象的外边缘添加第二个未知边框圆圈，实际上是 background:black，也超出了 10px 的边界（证明：将背景更改为#ffd300，它会消失）。

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

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

How do I remove this ugly border created inset shadow?

css

css-transitions