html实现边缘隐藏,html – 使用overflow：hidden的CSS圆周围的像素化边缘;

这里是我的猫/动画的没有任何阴影的

JSFIDDLE显示的问题，我尽可能清楚。对我的理解，这是由边界半径和可能由于overflow：hidden;

猫头鹰不是这个问题是关于，只是一个类似的情况我的例子。jsfiddle / cat是这个问题是什么，对不起的混合！

这里是一个JSFIDDLE为我的猫与插入盒阴影使用框阴影的模糊属性和像素化边缘仍然在眼睛周围相同。

这里的答案确实解决了我看到的与我的猫头鹰图像，但不是这个答案是什么。

这里是一个插入盒子阴影的猫，同时使用第三个值，模糊。

我已经在Safari，Chrome和Firefox中测试过这个小提琴，他们似乎都显示相同。

我有两只眼睛在Cheshire Cat，我开始制作昨天从CSS。一切都渲染得很好，我也做了一个Owl(我第一次以为这是一个类似的情况，但它不是)从CSS中有一个非常微小但类似的问题，在眼睛像素化的边缘。

我也试图给眼睛一个紫色的边框，但像素化的边缘保持在边缘的边缘相同。

在我的新CSS创建外部边缘的眼睛是非常像素化，似乎是父圆的颜色(黄色)。

这里是眼睛的CSS。

.eye {

border-radius: 50%;

height: 100px;

width: 100px;

background: #FAD73F;

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;

}

.pup {

border-radius: 50%;

height: 20px;

width: 20px;

background: #2b2b2b;

display: block;

position: absolute;

top: 40px;

left: 40px;

}

.lidT {

display: block;

width: 100px;

height: 100px;

background: #821067;

position: absolute;

top: -80px;

z-index: 20;

}

.lidB {

display: block;

width: 100px;

height: 100px;

background: #821067;

position: absolute;

bottom: -80px;

z-index: 20;

}

下面是我用来做这个动画/生物的jsfiddle。

我相信问题是由…造成的

我认为问题的根源是由.lidT和.lidB类我包含在我的.eye内部造成的。

它似乎在它的边缘切掉眼皮1px。试着让眼睛在小提琴里眨眼，看看我的意思。

图像也不是没有问题，但我想坚持使用CSS图像的第一个学习的原因。

没有帮助的样式列表

> box-shadow

>边框

> box-sizing

>不是Firefox的唯一错误

结束列表

更新

一个工作是在眼睛上增加一个眼窝或外部主标签。这隐藏了像素化，但只是解决问题的一个解决方法。

有关更多详细信息，请参阅apaul34208答案

这里是apaul34208的问题，

看看左边和上边的眼睛是平的，我想知道如果我的问题是一个浏览器问题或CSS。

结束更新

截至2013年11月13日的最佳选择

使用.eye上的背景渐变似乎是迄今为止最清晰的解决方案。参考ScottS的答案。

这也适用于Firefox，Chrome，Safari和IE。 (在IE bu的一个小ruff比以前好多了)

任何和所有的帮助，非常感谢！