相关疑难解决方法(0)

类似于" css变换,铬合金锯齿状边缘 ",Firefox上的3D变换也是如此,例如:http://jsfiddle.net/78d8K/5/(< - 记住:Firefox)

这一次,backface-visibility没有帮助:(

任何的想法？

这个带边框的圆圈看起来很模糊.是否有可能修复它以及如何解决？

div {
  border-radius: 50%;
  border: 1px solid black;
  height: 22px;
  width: 22px;
  background-color: white;
}

<div></div>

我用这个css创建了一个三角形:

.arrow-left {
width: 0px;
height: 0px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
position: relative;
left: -7px;
top: -32px;
z-index: 1;
border-right: 200px solid #CC888A;
}

但是当我向它添加变换时:

.arrow-left {
width: 0px;
height: 0px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
transform: rotate(45deg);
position: relative;
left: -7px;
top: -32px;
z-index: 1;
border-right: 200px solid #CC888A;
}

一条奇怪的虚线出现在三角形的中心.它在Chrome中显得很好,我知道Firefox会显示它.

这是一个例子:http://codepen.io/aaronlbrink/pen/zLFEJ

更新此工作:http://codepen.io/aaronlbrink/pen/qHbCG

在我的滑块中,我遇到了问题,在我的淡化效果结束后,我旋转的容器的一部分看起来像一个步骤.我可以在这里举个例子:

http://lamit.webflow.com

正如您在滑块中看到的那样,在效果期间,文本栏的底部是平滑的.然而,在过渡之后,它看起来很奇怪.

关于如何摆脱它的任何想法？

更新

由于此站点已完成webflow,因此在分析代码时会出现一些css错误(由于Webflow的一些预防).

相关代码如下:

CSS

.mask {
    left: -2%;
    top: -50px;
    display: block;
    width: 105%;
    margin-right: auto;
    margin-left: auto;
   -webkit-transform: rotate(-3deg);
   -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
}

HTML

<div class="w-slider slider" data-infinite="1" data-autoplay="1" data-delay="4000" data-duration="5000" data-animation="fade">
    <div class="w-slider-mask mask">
        <div class="w-slide">
            <div class="slide-zusatz1">
                <div class="w-container slidertext">
                    <p>Here is some text</p>
                </div>
            </div>
            <img src="myimg.png">
         </div>
    </div>
</div>

谢谢

我在CSS中完成了这个.

添加后,它在Google Chrome中运行良好:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

但在FireFox中,它看起来像这样:

在这里查看来源

我尝试了几件事并搜索了很多.我不知道如何摆脱FireFox创造的边界.我找到的大多数东西都是关于过渡的,我没有使用过.任何想法都会非常受欢迎.

参考文献:
- CSS3变换旋转导致Chrome中的1px移位
- -webkit变换旋转 - Chrome中的像素化图像
- CSS过渡效果使图像模糊/移动图像1px,在Chrome中？