相关疑难解决方法(0)

这是我的猫/动画的JSFIDDLE,没有任何 drop-shadows尽可能清楚地显示问题.根据我的理解,这是由于border-radius和可能由于overflow: hidden;.

猫头鹰不是这个问题的例子,只是我所处的类似情况的一个例子.这个问题是jsfiddle/cat,抱歉混淆了!

这是我的猫的JSFIDDLE,带有使用blura属性的插入框阴影,box-shadow并且像素化边缘在眼睛周围仍然是相同的.

这里的答案确实解决了我用猫头鹰图像看到的内容,但没有解释这个答案的内容.

这是inset box-shadow使用第三个值的一段时间的猫,blur.

我在Safari,Chrome和Firefox中测试了这个小提琴,它们似乎都显示相同.

我在Cheshire Cat上有两只眼睛,我昨天开始使用CSS.一切都渲染得非常好,我也制作了一个猫头鹰(我首先认为这是一个类似的情况,但它不是)出于CSS,在边缘像素化的眼睛上有一个非常小但类似的问题.

我也尝试给眼睛一个紫色的边框,但像素化的边缘在边缘边缘保持不变.

在我的新CSS创建中,眼睛的外边缘非常像素化,并且似乎是父圆的颜色(黄色).

这是眼睛的CSS.

.eye {
  border-radius: 50%;
  height: 100px;
  width: 100px;
  background: #FAD73F;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: inline-block;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
  z-index: 100;
}

.pup {
  border-radius: 50%;
  height: 20px;
  width: 20px;
  background: …

我有一个position:relative带有position:absolute红色克隆的绿色环:before和覆盖它们的position:absolute白色克隆:after(因为它们位于同一个地方并具有相同的大小).

问题是:它在测试的两个浏览器(Chrome和Firefox)上都会出现问题,我仍然可以看到白色蒙版下的绿色/红色环.让绿色环overflow:hidden部分修复除去外部流血的问题; 但内部出血边界仍然存在.

为什么会发生这种情况,我怎么能完全隐藏下面的圆圈呢？

Codepen

body {
  background: lavender;
}

#ring {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid green;
}

#ring:before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border: 50px solid red;
  border-radius: 50%;
}

#ring:after {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid …