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