带有背景剪辑的内联元素：文本；在 Safari 中答案

【问题标题】：inline element with background-clip: text; in Safari带有背景剪辑的内联元素：文本；在 Safari 中
【发布时间】：2021-03-25 11:06:23
【问题描述】：

在Safari浏览器中使用background-clip: text;实现inline元素渐变色文字（图1）。将显示更改为inline-block 或block 时似乎没问题，但我更喜欢内联效果。

enter image description here

我想知道如何才能实现与 Chrome 显示相同的视觉效果（图 2）

enter image description here

这里是代码，任何帮助将不胜感激:)

import React from 'react';

import './demo.css'

const Demo = () => {
    return (
        <div className="container">
            <div className="text">When the rain is blowing in your face and the whole world is on your case, <span className="highlight">I could offer you a warm embrace to make you feel my love. </span>To make you feel my love.
            </div>
        </div>
    );
}

export default Demo;

/* demo.css */
.container {
    width: 200px;
    margin: 20px;
    border: 1px solid red;
}

.text {
    font-size: 16px;
}

.highlight {
    font-weight: bold;
    background-image: linear-gradient(30deg, red, blue);
    background-clip: text;
    color: transparent;
}

【问题讨论】：

标签： javascript css reactjs safari mobile-safari

【解决方案1】：

使用 'display:inline;和-webkit-box-decoration-break：克隆；像这样……

.test {
    display: inline;
    background-image: linear-gradient(30deg, red, blue);;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-box-decoration-break: clone;
}
<div>
  <p class="test">The background extends behind the border.</p>
<div>

【讨论】：