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

Question

这是我的猫/动画的JSFIDDLE,没有任何 drop-shadows尽可能清楚地显示问题.根据我的理解,这是由于border-radius和可能由于overflow: hidden;.

---

猫头鹰不是这个问题的例子,只是我所处的类似情况的一个例子.这个问题是jsfiddle/cat,抱歉混淆了!

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

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

这是inset box-shadow使用第三个值的一段时间的猫,blur.

---

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

我在Cheshire Cat上有两只眼睛,我昨天开始使用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中的小褶皱比以前好多了)

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

Answer 1

使用背景渐变

这不需要额外的html标记.我已在Firefox上测试过它(并确认它可以在Safari和Chrome上运行,请参阅注释).它使得眼睛的背景与边缘相距一定距离,然后使用径向背景渐变的颜色为黄色.这似乎避免了沿着边缘看到的"混合"(和泛黄),它试图根据border-radius和overflow: 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;
}

Answer 2

我相信你所感知的像素化是由box-shadow而不是border-radius或者的结果overflow.

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

尝试设置属性的blur(或第三个值)box-shadow.

之前和之后:

看看<div/>这个jsFiddle演示中两个四舍五入的区别.

Answer 3

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

工作实例

<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

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

尝试剪裁你的背景:

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

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

模拟像素的模拟演示.

可悲的是,你将不得不使用background-image,一个真实的image-file.png.

就我而言,我试图用一个outter容器改造你的标记以应用bo​​rder-radius.用户Mosher做得很好,看到他的答案是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