相关疑难解决方法(0)

这是我的猫/动画的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: …

我有一个布局,其中所有页面内容都在一个带圆角的框中.这包括页面标题等.我有一个div包含我的标题内容的元素,一个div包含页面主要内容的元素,以及一个div包含页脚的元素.我的问题是这样的:由于我的"标题"的边框div没有圆角,大的"容器" div似乎没有在顶部四舍五入.我已经调查过,并证明这只是"标题" div叠加在"容器"上div.我在这里有一个例子:http://jsfiddle.net/V98h7/.

我已经尝试将"标题"的边界四舍五入div到相同的范围,但这会在边框上创建一个小缺陷(它获得了自己的边框,"标题" div的背景颜色).出于绝望,我还尝试将容器的z-index设置为大数.那什么都没做.

我觉得这个问题应该有一个简单的解决方案.我不想要一个javascript修复.我更喜欢CSS,但LESS也可以.

好的,所以我经历过像"background-clip:padding-box"这样的答案.虽然它使最终产品看起来好一点,但它仍然不能完全解决边界外背景颜色渗出的问题.有没有人真正解决这个问题？

这是该问题的屏幕截图:

用于按钮的CSS

#footer #pager li a {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: block;
    float: left;
    color: #444 !important;
    text-decoration: none !important;
    background-clip: padding-box !important;
    padding: 8px 12px;
    background-color: #ccc;
    border: 1px solid #000;
}