相关疑难解决方法(0)

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

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

任何的想法？

我希望能够绘制它的一个片段另一种颜色的圆圈,我想覆盖到能够在增量增加段的数量10%从0%到100%.

Google上的所有示例都是所有行业而不是细分市场

到目前为止,这是我能够提出的最好的:

div.outerClass {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 2.5px;
    overflow: hidden;
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
}

div.innerClass {
    width: 10px;
    height: 10px;
    border: 5px solid green;
    border-radius: 36px;
}

<div class="outerClass">
    <div class="innerClass"></div>
</div>

0%,50%和100%我都可以做.

使用-webkit-transform: rotate(-5deg);一个div容器,Chrome的渲染与真正的锯齿边缘图像的网格.在FF(-moz-transform:)和IE(-ms-filter:)中,一切看起来都很好 - 请看下面的区别.

我能做些什么吗？

我在Chrome浏览器上看到了偏斜的HTML div之间的白线.以下是该问题的屏幕截图:

这是代码:

.abc {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  backface-visibility: hidden;
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left:0px;
  transform: skewX(-10deg);
  transform-origin: 0% 100%;
}

.def {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  backface-visibility: hidden;
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left:200px;
  transform: skewX(-10deg);
  transform-origin: 0% 100%;

}

调试示例位于:https://jsbin.com/dijazit/2/edit？html,css,output

我们如何删除此白线？感谢这里的任何帮助.

斜面边缘在Chrome中看起来很糟糕.在Firefox中没问题.为什么？

http://codepen.io/anon/pen/EaxJKv

.rr-left:after {
    bottom: 0;
    border-top: 30px solid #2c3e50;
    border-right: 1050px solid #FFFFFF;
}

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

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旋转以在CSS中获得万花筒效果.

一切看起来都不错,除了Chrome以某种分辨率(在IE10上没有问题,我没有测试FF)

我不知道为什么但是有时我在万花筒的中心有一些奇怪的白色边框,即使旋转值看起来一切都很好.我找不到任何解决方法......

你可以在这里测试一个工作演示:http://jsfiddle.net/Lvc0u55v/4519/

您可能需要从jsfiddle移动滑块以查看显示的白色边框.

我正在使用这种css:transform: rotate(151deg) matrix(-1, 0, 0, 1, 0, 0)带有背景图像.

你能帮我删除这些边界吗？

在下面的示例中,包含一些文本的DIV(示例A)在transform: translate应用CSS 时会略微模糊.

而在文本示例B中,字体是尖锐的.

该问题仅在Google Chrome上发生,并且可在FireFox 46.0.1上正常运行.我能够重现它:

• 谷歌浏览器版本51.0.2704.84米
• 谷歌浏览器版本53.0.2768.0金丝雀(64位)

实例:

http://jsbin.com/calidefune/edit?html,output

我想知道,如果我的代码出现问题,或者是Chrome中的错误.

也有任何想法如何解决它是值得欢迎的,考虑到我想transform: translate尽可能保持,我主要针对最新的Chrome和FireFox.

到目前为止我注意到的事项:

• 在不同的字体大小下,不同级别会出现模糊效果.
• 使用webkit-font-smoothing : none;没有帮助.
• 任何字体(系统默认或自定义)都会出现问题.
• 我正在使用Window 8.1.

#test {
  position: fixed;
  font-size: 20px;
  top: 60%;
  left: 40%;
}

#splashScreen__spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -90px);
  width: 50px;
  height: 50px;
}

#splashScreen__infos {
  position: fixed;
  font-size: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-font-smoothing: none;
}

.loadingSpinner {
  width: inherit;
  height: inherit;
  border: 5px solid …

border-radius在我的Android模拟器上使用时,我看到这样的丑陋:

丑陋的边界半径http://beautifulpixel.com/assets/5554_FastAndSmall-20100726-130326.png

无论如何让Android以-webkit-border-radius更令人愉悦的方式显示圆角？大多数现代桌面浏览器和Mobile Safari似乎都是它们的角落,而不是Android的渲染器.

我真的希望我不必用图像做这个,并且有一些很棒的技巧来获得只有边界半径css声明的漂亮角落.

我正在尝试创建带有变换旋转属性的摆动按钮，它在 Opera 和 Chrome 浏览器中工作正常，但在 Firefox 中它在按钮边框中创建奇怪的像素问题：

我的按钮和摆动关键帧的 css 代码

.RedButton {
  background-color: #bc0000;
  border-radius: 7px;
  border: 1px solid #bc0000;
  display: inline-block;
  cursor: pointer;
  color: #fff !important;
  font-family: Arial;
  font-size: 30px;
  font-weight: bold;
  padding: 7px 24px;
  text-decoration: none;
  margin-top: 15px;
  animation: swing 5s infinite;
  -moz-animation: swing 5s infinite;
  transition: 0.2s;
  -moz-transition: 0.2s;
}

@-moz-keyframes swing {
  20%,
  60% {
    -moz-transform: rotate(5deg);
  }
  40%,
  80% {
    -moz-transform: rotate(-5deg);
  }

  100% {
    -moz-transform: rotate(0deg);
  }
}

@keyframes swing {
  20%,
  60% { …

我正在尝试使用透明.png作为背景图像，以便我可以动态使用我需要的任何颜色来更改“图标”的颜色。

我有一个 40px x 40px 的 .png。我使用背景图像将其应用到 div，然后给同一个 div 设置背景颜色：

.icon {
    width:40px;
    height:40px;
    background-image:url('../images/ico.png');
    background-color:#999999;
}

这通常工作正常，所以我不确定这是怎么回事。以下是我在 Mac 和 PC（分别）最新版本 Chrome 中看到的屏幕截图：

苹果

个人电脑

编辑：这是该网站的精简版本，它显示了我遇到的问题：

我尝试制作一个小提琴（无论如何），但是小提琴在 Chrome 中完美显示，只是不在我的实际网站上。我没有使用百分比或其他任何东西，并且我使用背景的本机大小 - 其他人有这个问题吗？

我的网站上有一个奇怪的错误.当我试图通过使用文本转换块

transform: translateY(0px) translate3d(0,0,0) translateZ(0);

我得到了这个块,但文本后面有黑色(或白色)条纹.我想取决于背景是什么 - 光明还是黑暗.我不能附上屏幕截图,所以我留下了一个链接.动画块 - 滚动页面时出现的文本块.此动画完全适用于所有浏览器,但不适用于Firefox(Windows版本).也许有人看到这个并且可以帮助......谢谢!