Question

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

猫头鹰不是这个问题的例子，只是我所处的类似情况的一个例子。这个问题是关于jsfiddle / cat的，抱歉混淆了！

这是我的猫的JSFIDDLE，它使用blur的{{1}}属性插入阴影，并且像素化边缘在眼睛周围仍然是相同的。

这里的答案确实解决了我用猫头鹰图片看到的内容，但没有解释这个答案的内容。

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

inset box-shadow

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

我在Cheshire Cat上有两只眼睛，我昨天用CSS开始制作。一切都渲染得非常好，我也用CSS {{3>}（我首先认为这是一个类似的情况，但它不是），在眼睛上有一个非常小但类似的问题在边缘像素化。

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

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

这是眼睛的CSS。

blur

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

Owl

我认为问题是由...引起的

我认为问题的根源是由.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; }中包含的.lidT和.lidB类引起的。

似乎在眼睑边缘周围.eye切开了眼睑。试着让小提示眼睛眨眼，看看我的意思。

图像也不是不可能的，但出于学习的原因，我想首先制作一张CSS图像。

无效的样式列表

1px
box-shadow
border
不仅是Firefox的错误

结束列表

更新

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

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

这是apaul34208答案的问题，

apaul's answer

看看眼睛的左侧和上侧是如何平坦的，我很想知道我的问题是浏览器问题还是css 。

结束更新

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

到目前为止，在box-sizing上使用背景渐变似乎是最干净的解决方案。请参阅ScottS答案。

这在Firefox，Chrome，Safari和IE中也有效。（IE中的小褶皱比以前好多了）

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

Answer 1

使用背景渐变

这不需要额外的HTML标记。我已在Firefox上测试过它（并确认它可以在Safari和Chrome上运行，请参阅注释）。它使得眼睛的背景与边缘相距一定距离，然后使用径向背景渐变的颜色为黄色。这似乎可以避免在尝试根据border-radius和overflow: hidden组合“隐藏”的边缘看到“混合”（和变黄）。

Here is the original solution/fiddle example with 1px of purple.删除投影后，you can still slightly detect a discoloration。所以我将下面的答案更新为2px宽紫边，this winking cat with drop shadow removed shows that no discoloration is occurring。

以下是（更新为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

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

浏览器正在尝试在圆圈内侧绘制1px #2b2b2b行。这条线必然看起来是锯齿状的，因为它在弯曲的路径上，并且需要在宽度上显示为1px。

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

之前和之后：

Owl eyes before and after

查看此jsFiddle demo中两个四舍五入的<div/>之间的差异。

Answer 3

我想我可以解决你的问题。基本上你只需要添加眼窝并隐藏眼窝上的溢出物而不是眼睛。

<强> Working Example

<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 4

请参阅此答案：stackoverflow.com/questions/6001281/firefox-border-color-border-radius-and-background-color-creates-ragged-edges-a#6001374

以及其他已经接受的答案：Border-radius bleeding

尝试剪裁背景：

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

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

模糊像素的模拟演示。 BORDER-RADIUS BLUR

可悲的是，你必须使用背景图片，一个真实的image-file.png。

就我而言，我试图用扩展容器改造你的标记以应用border-radius。用户Mosher做得很好，请参阅his answer's jsfiddle。

Answer 5

工作演示在这里： 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。新的.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宽度更改为105px，然后为#eyeCover添加此样式：

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

工作演示在这里： jsFiddle

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

5 个答案:

使用背景渐变