时间戳

首页 > 解决方案 > 在文本上使用 CSS 渐变时的奇怪行为 (Safari)

css - 在文本上使用 CSS 渐变时的奇怪行为 (Safari)

问题描述

大家好，我在 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/

非常感谢您！

标签： csssafariparagraphwebflow

解决方案

我试图检查它。“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>

推荐阅读