html - CSS Circle 周围的像素化边缘溢出 : hidden;

Question

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

---

猫头鹰不是这个问题的问题，只是我遇到的类似情况的一个例子。jsfiddle/cat 是这个问题的问题，抱歉混淆了!

这是一个JSFIDDLE对于我的猫，它使用 box-shadow 的 blur 属性插入框阴影，并且眼睛周围的像素化边缘仍然相同。

这里的答案确实解决了我在猫头鹰图像中看到的问题，但不是关于这个答案的内容。

这是使用第三个值 blur 时带有 inset box-shadow 的猫。

---

我已经在 Safari、Chrome 和 Firefox 中测试了这个 fiddle ，它们似乎都显示相同。

我有两只眼睛盯着 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。

JSFIDDLE

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

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

它似乎将眼睑的边缘切掉 1px。试着让 fiddle 中的眼睛眨一下，看看我的意思。

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

没有帮助的样式列表

1. 盒子阴影

2. 边框

3. 框大小调整

4. 不仅仅是 Firefox 的错误

结束列表

更新

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

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

这是apaul34208答案的问题，

看到眼睛的左侧和顶部是平的，我很想知道我的问题是浏览器问题还是 css。

结束更新

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

在 .eye 上使用背景渐变似乎是迄今为止最简洁的解决方案。引用 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;
}