CSS圆周围的像素化边缘溢出：隐藏；

小编典典

CSS圆周围的像素化边缘溢出：隐藏；

css

这是我的 owl/动画的JSFIDDLE，没有任何清楚显示的问题。据我了解，这是由引起的，可能是由于引起的。
drop-shadows
border-radius
overflow: hidden;

owl不是这个问题的意思，只是我所遇到的类似情况的一个示例。jsfiddle / cat是这个问题的意思，对不起，
混淆！

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

此处的答案确实可以解决我在猫头鹰图像中看到的问题，但不能解决该问题的含义。

这是inset box-shadow使用第三个值的owlblur。

阅读 266

2020-05-16

共1个答案

小编典典

使用背景渐变
这不需要额外的html标记。我已经在Firefox上对其进行了测试（已确认也可以在Safari和Chrome上运行，请参见评论）。它使眼睛的背景从边缘到某个距离处为紫色，然后使用放射状的背景渐变为该颜色将其余的部分染成黄色。这似乎避免了
在尝试基于border-radius和overflow: hidden组合进行“隐藏” 的边缘上看到的“混合”（和泛黄）。

这里是原来的解决方案/小提琴例子1px的紫色。但是，除去阴影后，您仍然可以稍微检测到变色。因此，我将下面的答案更新为2px宽紫色边框，这只去除了阴影的眨眼猫表明没有发生变色。

这是（更新为2px）代码：

.eye {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background: #fad73f; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #fad73f 0, #fad73f 48px, #821067 49px); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0,#fad73f), color(48px,#fad73f), color-stop(49px,#821067)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 48px,#821067 49px); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 48px,#821067 49px); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 48px,#821067 49px); /* IE10+ */
    background: radial-gradient(ellipse at center,  #fad73f 0,#fad73f 48px,#821067 49px); /* W3C */

    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;
}

2020-05-16