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

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

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

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

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

.eye {    border-radius: 50%;    height: 100px;    width: 100px;    background: #fad73f;     background: -moz-radial-gradient(center, ellipse cover,  #fad73f 0, #fad73f 48px, #821067 49px);     background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0,#fad73f), color(48px,#fad73f), color-stop(49px,#821067));     background: -webkit-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 48px,#821067 49px);     background: -o-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 48px,#821067 49px);     background: -ms-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 48px,#821067 49px);     background: radial-gradient(ellipse at center,  #fad73f 0,#fad73f 48px,#821067 49px);     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;}