1

大家好,我在 Safari(macOS Mojave 上的版本 13.0.5)上使用 css 渐变时出现了这种奇怪的行为。

该段落在 Chrome 和 Firefox 上看起来很完美。这是我正在使用的代码:

.highlight1 {
   background: -webkit-linear-gradient(180deg, #FFFFFF 5%, #EE8344 91%);
               -webkit-background-clip: text;
               -webkit-text-stroke: 3px rgba(255, 0, 0, 0);
   color: #232323;}  

最奇怪的是,只有一个词从段落中消失了。关于如何解决这个问题的任何提示?

这是现场网站:https ://portfolio-84e6dc.webflow.io/

非常感谢您!

4

1 回答 1

0

我试图检查它。“brewer”这个词存在并且不会消失,但它不在同一行,span因此样式不适用于它。当我尝试减小字体大小时,效果就显现出来了。

我建议将 brewer 一词分隔在不同的跨度中,并调整样式 inhighlight1和 aNEW_CLASSNAME以产生类似的效果。但要注意使用 Safari 会根据屏幕大小不同产生效果

<p class="herotext">
    I spent some time in the 
    <span class="highlight1">world's largest </span>
    <span class="NEW_CLASSNAME">brewer</span> and the 
    <span class="highlight2">first brazilian unicorn</span> and now I design for companies 
    and startups.
</p>
于 2020-02-11T08:27:33.800 回答