使用背景渐变
这不需要额外的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;}
