37

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

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

这是我的猫的JSFIDDLEblur ，带有使用a 属性的插入框阴影，box-shadow并且像素化边缘在眼睛周围仍然相同。

这里的答案确实解决了我在 Owl 图像中看到的问题，但不能解决这个答案的内容。

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

插入框阴影

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

我有两只眼睛盯着我昨天开始用 CSS 制作的柴郡猫。一切都渲染得很好，我还用 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

我相信问题是由...引起的

.lidT我认为问题的根源是由.lidB我包含在我的.eye.

1px它似乎在它的边缘附近切掉了眼睑。试着让眼睛在小提琴中闪烁，看看我的意思。

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

没有帮助的样式列表

  1. box-shadow

  2. border

  3. box-sizing

  4. 不是 Firefox 独有的错误

结束列表

更新

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

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

这是 apaul34208 答案的问题，

阿保尔的回答

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

结束更新

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

使用背景渐变.eye似乎是迄今为止最干净的解决方案。请参阅 ScottS 的回答。

这也适用于 Firefox、Chrome、Safari 和 IE。（IE bu 中的一点点 ruff 比以前好多了）

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

4

5 回答 5

13

使用背景渐变

这不需要额外的 html 标记。我已经在 Firefox 上对其进行了测试（并且确认它也可以在 Safari 和 Chrome 上运行，请参阅评论）。它使眼睛的背景在距边缘一定距离处为紫色，然后使用径向背景渐变为颜色的其余部分为黄色。这似乎避免了沿边缘看到的“混合”（和变黄），它试图基于border-radiusandoverflow: 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;
}
于 2013-11-13T16:31:47.480 回答
6

我相信您所感知的像素化是由于box-shadow而不是border-radiusor的结果overflow。

浏览器试图1px #2b2b2b在圆的内侧顶部画一条线。这条线必然会看起来参差不齐，因为它位于弯曲的路径上并且需要以1px宽度显示。

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

之前和之后：

猫头鹰的眼睛前后

在这个jsFiddle 演示中查看两个圆角<div/>s之间的区别。

于 2013-11-09T22:06:38.117 回答
6

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

工作示例

<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;
}
于 2013-11-11T23:52:47.637 回答
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

于 2013-11-13T06:47:31.867 回答
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 选择一样。

模糊像素的 Photoshop 演示。 边界半径模糊

可悲的是，您将不得不使用 background-image，一个真正的 image-file.png。

就我而言，我尝试使用外部容器来修改您的标记以应用边界半径。用户 Mosher 做得很好，请参阅他的答案 jsfiddle。

于 2013-11-12T00:05:37.110 回答