Question

尝试为我的标题添加一个有角度的边框，然后在有角度的边框周围添加一个框阴影。

似乎工作正常但在Firefox上有一些白色背景显示在盒子阴影周围。

代码如下

header {
  background: #41ade5;
  color: #fff;
  position: relative;
  z-index: 1;
  padding: 45px;
}
header:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-1.5deg);
  transform-origin: 100%;
  z-index: -1;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.5)
}
body {
  margin:0;
}

http://codepen.io/velnias2015/pen/KaBzrq

在所有其他浏览器上看起来很好，是否有针对firefox的修复程序？

Answer 1

添加translateZ（1px）以修复变换的抗锯齿问题。

transform: translateZ(1px) skewY(-1.5deg);

渲染渲染问题很常见，修改3d变换属性通常是修复它们的最佳方法，因为它会导致浏览器使用不同的方法进行渲染。同样适用的其他常见修复方法似乎适用于：backface-visibility: hidden和perspective: 1px。

使用倾斜与盒阴影的角度边界 - FF问题

1 个答案: