相关疑难解决方法(0)

我很难解决这个谜。我创建了一个“敲除文本”效果，并使用：after将分隔符添加到了h2中。除了iOS（10.3.2）上的Safari之外，它在我测试过的所有内容上看起来都很棒。

链接到一个无用的临时修复小提琴。

h2.gradient {
    color: #013c65;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 2em;
    line-height: 1em;
    background: linear-gradient(1deg, #800909, #332222);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -ms-background-clip: text;
    -ms-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
h2.gradient:after {
    content: '';
    position: relative;
    display: block;
    height: .12em;
    width: 2.5em;
    background-image: linear-gradient(1deg, #800909, #332222);
    top: .5em;
}

像问题看起来都似乎是相结合background-clip: text;，text-fill-color: transparent;并与伪元素：display: block;。

我能够绝对定位并内联显示伪元素。目前，我已经将标头包裹<div class="special-heading">在div之后并添加了分隔符。

iOS会不会有这样的原因，或者其他人也遇到过类似的问题吗？我发现添加零宽度的空间​使它神奇地工作了。

但是，我认为这可能是一个错误，因为我可以偶尔在Mac上打开Web检查器的情况下使用原始方法。

感谢您的想法！

这是CodePen上的代码.它看起来与我在Chrome中的预期完全一样.Firefox和Safari都看错了.(我是所有3的最新版本.)

我正在研究一种跨多个inline-block元素使用恒定渐变背景的方法.以下是它现在的工作方式:

1. 我有一个父元素,ol其:before伪元素具有渐变背景(transparent到不透明的颜色)和一个z-index在子元素上方显示它的集合li.
2. 该li■找的background-color设置为颜色看起来像什么梯度的transparent值设置为.
3. 所述li的color被设置为transparent和具有:before该显示对以前设置为文本伪元素transparent并且它们的z折射率设置为显示上述ol:before(背景梯度).

我在Firefox中遇到的问题:

1. 渐变看起来有3个颜色停止(透明,灰色,透明)而不是设置的2.
2. 渐变似乎有一个多重混合模式设置.

我在Safari中看到的问题:

除了Firefox中的相同问题,它还显示两个似乎具有多重混合模式的渐变.一个来自-webkit-linear-gradient一个linear-gradient.但是,解决明显混合模式的问题应该考虑到第三个问题.

我的谷歌搜索让我意识到background-blend-mode,但设置为normal(或任何其他有效值)没有改变任何东西.我认为它只适用于单个元素的多个背景,但我不确定.但是,这可以解释为什么它不能解决我的问题.