在下面的小提琴中,如果你注释掉CSS的margin / float属性,那么块看起来很好.
为什么渐变在那里弄乱了？
通过“搞砸了”我的意思是(注意线条不平滑)：
(请不要尝试在解决方法中修复它,我知道如何做到这一点,这不是这个问题的重点.)
.rec {
margin: 10px;
float: left;
height: 50px;
width: 50px;
background: linear-gradient(135deg,rgb(134,108,83) 0%,83) 12.5%,rgb(127,107,86) 12.5%,86) 25%,rgb(228,175,104) 25%,104) 37.5%,rgb(254,221,139) 37.5%,139) 50%,rgb(48,44,43) 50%,43) 62.5%,rgb(237,232,226) 62.5%,226) 75%,rgb(200,193,192) 75%,192) 87.5%,rgb(157,151,151) 87.5%,151) 100%);
}
我在Chrome 48.0.2564.116(64位)上进行此测试
更新：
正如Lester指出的那样,-webkit-backface-visibility：hidden;解决这个问题.结果是-webkit-transform：translate3D(0,0);修复此问题.也许任何基于-webkit的寻址命令都会出于某种原因.
尽管如此,最初的问题仍然没有答案,但增加了这个难题.
解决方法
-webkit-backface-visibility: hidden;
这可以解决chrome中的问题,因为在其他浏览器中,别名工作正常
