CSS3：锯齿状边框在 Firefox 中无法正确显示

Question

请看这里：JSFiddle Demo

以下是相关的 HTML 和 CSS：

<div class="header"><h1>This is a header</h1></div>

.header{
    color:white;
    background-color:#2B3A48;
    text-align:center;
    height: 100px;
    position: relative;
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid transparent;
    margin: 0 5px;
    /*box-sizing: border-box;*/
    background-clip: padding-box;
    /*-webkit-filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px);*/
}
.header:before, .header:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 22px;
    background-repeat: repeat-y;
    background-size: 22px 10px;
    z-index: 1;
}
.header:before {
    left: -5px;
    background-image: linear-gradient(-45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), linear-gradient(45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -webkit-linear-gradient(-45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -webkit-linear-gradient(45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -moz-linear-gradient(-45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -moz-linear-gradient(45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -o-linear-gradient(-45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -o-linear-gradient(45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
}
.header:after {
    border-left: 10px solid transparent;
    right: -5px;
    background-image: linear-gradient(135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), linear-gradient(-135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -webkit-linear-gradient(135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -webkit-linear-gradient(-135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -moz-linear-gradient(135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -moz-linear-gradient(-135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -o-linear-gradient(135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -o-linear-gradient(-135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
}

正如预期的那样，渐变适用于 IE10+（IE9/IE8 可能）和其他现代浏览器，见下文：

然而 Firefox 最终看起来像这样：

有谁知道如何解决这个问题？

另外，如果在其他浏览器中可用，我如何将-webkit-filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px); 转换为在其他浏览器中工作？

Answer 1

在为您的 CSS 呈现透明度时，Firefox 似乎有问题。

幸运的是，您可以在特定于 firefox 的 CSS 中将 transparent 替换为 #2B3A48
，如下所示：- http://codepen.io/mrmoje/pen/dkAwE.... 瞧！你的神器不见了！

让-webkit-filter 在其他浏览器上工作会很棘手。在撰写本文时，只有 webkit 和 blink（Chrome(ium)、Opera、Safari 等）能够实现您所寻求的 CSS 过滤器。

Gecko (firefox) 目前不支持任何这些。

我不确定 IE 的 CSS directX 过滤器是否能达到同样的效果。但即使他们这样做了，他们也将在未来的 IE 版本中被删除

一个好的跨浏览器解决方法是在图像中“硬编码”您的投影并提供它。