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

小编典典

使用背景渐变

这不需要额外的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