CSS实现字体渐变、文字描边（空心文字）、文字倒影

一、字体渐变

• -webkit-background-clip:text; 和 background-clip:text; 是关键属性，它允许我们将背景只应用到文本的形状上。
• 注意：把当前元素设置为行内块，以便能够应用背景

效果图例

HTML

    <div class="text-gradient">这是一段测试文字</div>

CSS

    .text-gradient {
        /* 设置字体透明 */
        color: transparent;
        /* 设置线性渐变，从红色渐变到蓝色 */
        background-image: linear-gradient(45deg, blue, red);
        /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
        -webkit-background-clip: text;
        /* 非Webkit内核浏览器需要使用标准前缀 */
        background-clip: text;
        /* 把当前元素设置为行内块，以便能够应用背景 */
        display: inline-block;
    }

二、文字描边（空心字体）

方法一、使用-webkit-text-stroke实现

• -webkit-text-stroke 是一个非标准但被部分浏览器支持的属性，用于直接给文本添加描边效果。
• 首先指定描边的宽度（例如 2px），接着是描边的颜色（例如 black）

效果图例

HTML

    <p class="text-stroke">这是一段测试文字，This is a test text</p>

CSS

.text-stroke {
        /* 描边宽度为1px，描边颜色为黑色 */
        -webkit-text-stroke: 2px red;
        color: aqua;
        font-size: 60px;
    }

方法二、使用text-shadow实现

• 根据需要调整阴影数量、偏移量和模糊半径来模拟不同粗细的描边
• 使用 text-shadow 复合阴影模拟描边效果
• 每一组阴影由偏移量（x偏移、y偏移）、模糊半径（可设为0表示无模糊）和颜色组成

效果图例

HTML

    <p class="text-shadow">这是一段测试文字，This is a test text</p>

CSS

.text-shadow {
        color: white;
        font-size: 30px;
        text-shadow:
            /* 左上角投影 */
            -1px -1px 0 black,
            /* 右上角投影 */
            1px -1px 0 black,
            /* 左下角投影 */
            -1px 1px 0 black,
            /* 右下角投影 */
            1px 1px 0 black;
    }

二、文字倒影

方法一、 使用-webkit-box-reflect属性为文本添加倒影效果

• 使用-webkit-box-reflect属性为文本添加倒影效果（仅在支持WebKit内核的浏览器如Chrome、Safari中生效）

效果图例

HTML

     <p class="text-reflection">这是一段测试文字</p>

CSS

.text-reflection {
        font-size: 60px;
        /* below：表示倒影在原元素的下方 -10px：位置举例可随具体需求调节 */
        /* gradient表示渐变效果，从透明到半透明白色（rgba(255, 255, 255, .3)），其中5%的位置开始出现半透明白色， */
        -webkit-box-reflect: below -10px -webkit-linear-gradient(transparent, transparent 5%, rgba(255, 255, 255, .3));
    }

方法二、使用伪元素（不推荐）

• 通过 data-text 属性存储文本内容，动态地将文本传递给伪元素
• 创建一个伪元素，并设置 content: attr(data-text); 来显示与原文字相同的内容
• transform: translateY(100%) rotateX(180deg);，将伪元素向下移动到原文字下方，并水平翻转以模拟倒影
• 调整伪元素的颜色为半透明黑色 color: rgba(0, 0, 0, 0.5);，模仿真实倒影的视觉效果
• 继承原文字的 font-size 和 font-family 样式，同时通过 white-space: pre; 保留文本中的空格和换行符。

效果图例

HTML

     <p class="text-reflection" data-text="这是一段测试文字，This is a test text">这是一段测试文字，This is a test text</p>

CSS

.text-reflection {
        font-size: 36px;
        font-family: Arial, sans-serif;
        /* 定位倒影-父相 */
        position: relative;
        color: black;
    }
    .text-reflection::after {
        /* 创建一个与原始文本相同的伪元素 */
        content: attr(data-text);
        /* 使用data属性存储文本内容以支持动态内容 */
        position: absolute;
        bottom: 0;
        /* 将倒影置于原始文本下方 */
        left: 0;
        right: 0;
        /* 反转文本并应用模糊效果以模拟倒影 */
        transform: translateY(100%) rotateX(180deg);
        /* 非必须，用于增加视觉上的模糊感 */
        filter: blur(1px);
        /* 设置倒影的颜色和透明度 */
        color: rgba(0, 0, 0, 0.37);
        /* 文字颜色为原色的半透明版本 */
        background-color: transparent;
        /* 字体相关的其他样式应与原始文本保持一致 */
        font-size: inherit;
        font-family: inherit;
         /* 保留空格和换行符 */
        white-space: pre;
    }