带有溢出的CSS圆周的像素化边缘：隐藏;

这里是我的猫/animationJSFIDDLE 没有任何 drop-shadows以尽可能清楚地显示问题。 据我了解，这是由border-radius引起的，可能是由于overflow: hidden; 。

---

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

这里是一个JSFIDDLE为我的猫与embedded盒阴影使用blur属性的box-shadow和像素化的边缘仍然是在眼睛周围相同。

这里的答案确实解决了我用猫头鹰形象所看到的东西，而不是为了解答这个问题。

这里是使用第三个值， blur的inset box-shadow的猫。

---

我已经在Safari，Chrome和Firefox上testing了这个小提琴，它们似乎都是一样的。

我有两只眼睛，我昨天从CSS开始制作的柴郡猫 。 一切都呈现得很好，我也做了一个猫头鹰 （ 我第一次认为这是一个类似的情况，但它不是 ）的CSS有一个非常小的但类似的问题，在边缘像素化的眼睛。

我也试图给眼睛一个紫色的边界，但像素边缘在边界边缘保持不变。

在我的新CSS创build时，眼睛的外边缘非常像素化，似乎是父圆圈的颜色（黄色）。

这是眼睛的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; } 

下面是我用来制作这个animation/生物的jsfiddle。

的jsfiddle

我相信问题是由…造成的

我认为问题的根源是由我的.eye里面包含的.lidT和.lidB类引起的。

它似乎削减了1px的边缘周围的眼皮。 试着让眼睛在小提琴中闪烁，看看我的意思。

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

没有帮助的样式列表

1. box-shadow

2. border

3. box-sizing

4. 不只是一个Firefox的错误

结束列表

更新

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

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

这里是与apaul34208答案的问题，

看看左侧和上方的眼睛是平坦的， 我很想知道我的问题是一个浏览器问题或CSS 。

结束更新

截至2013年11月13日的最佳select

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

这也适用于Firefox，Chrome，Safari和IE。 （IE浏览器中的一个小东西比以前好多了）

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

Answer 1

使用背景渐变

这不需要额外的HTML标记 。 我已经在Firefox上进行了testing（确认也可以在Safari和Chrome上运行，请参阅评论）。 它使得眼睛的背景是从边缘开始的一段距离的紫色，然后使用径向背景渐变色彩的黄色。 这似乎避免了沿边缘看到的“混合”（和变黄），它是基于border-radius和overflow: hidden组合来“尝试”隐藏的。

这里是1px的紫色的原始解决scheme/小提琴示例。 然而，随着阴影的删除， 你仍然可以稍微检测变色 。 所以我把下面的答案更新为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; } 

Answer 2

我想我可能有解决您的问题。 基本上你只需要添加眼窝，把溢出物隐藏在眼窝而不是眼睛上。

工作示例

 <span class="socket"> <span class="eye"> <span class="lidT"></span> <span class="pup"></span> <span class="lidB"></span> </span> </span> .socket { border-radius: 50%; height: 102px; width: 102px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; position: relative; top: -1px; left: -1px; display: inline-block; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4); z-index: 100; } .eye { border-radius: 50%; height: 100px; width: 100px; background: #FAD73F; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; position: relative; top: 1px; left: 1px; display: inline-block; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4); z-index: 100; } 

Answer 3

我相信你所感知的像素是box-shadow的结果，而不是border-radius或overflow 。

浏览器试图在圆的内部顶部绘制1px #2b2b2b行。 这条线看起来是锯齿状的，因为它在弯曲的path上，并且要求宽度为1px 。

尝试为box-shadow属性设置blur （或第三个值）。

之前和之后：

看看在这个jsFiddle演示中的两个四舍五入的<div/>之间的区别。

Answer 4

工作演示在这里： jsFiddle

将.eye内容放在另一个容器中，如下所示：

 <span class="eye"> <div id="eyeCover"> <span class="lidT"></span> <span class="pup"></span> <span class="lidB"></span> </div> </span> 

删除overflow:hidden从.eye overflow:hidden 。 新的.eye风格在这里：

 .eye { border-radius: 50%; height: 100px; width: 100px; background: #FAD73F; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; position: relative; display: inline-block; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4); z-index: 100; overflow: visible; /* change is here */ } 

将.lidT和.lidB宽度更改为.lidT .lidB ，然后为#eyeCover添加此样式：

 #eyeCover{ width: 102px; height: 102px; top:-1px; left:-1px; border-radius: 50%; overflow: hidden; position: relative; } 

工作演示在这里： jsFiddle

Answer 5

看到这个答案： stackoverflow.com/questions/6001281/firefox-border-color-border-radius-and-background-color-creates-ragged-edges-a#6001374

而另一个已经接受的答案是： 边界半径出血

尝试剪辑你的背景：

 .your-element { -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; } 

思考之后，“模糊”边缘像素是一种正常行为。 浏览器正在试图使东西基本上正方形。 不知何故，“中间”的像素将被模糊，就像一个Photoshop的select。

模糊像素的photoshoped演示。

不幸的是， 你将不得不使用一个背景图像 ，一个真正的image-file.png。

就我而言，我试图用一个外部容器来改变你的标记来应用边界半径。 用户Mosher做得很好，看到他的答案是jsfiddle 。