文字渐变

<?php

/*
此代码通过 add_action 将一个带有渐变文字样式的块添加到 Astra WordPress 主题的页眉部分。

功能介绍
显示带有线性渐变文字的标题和内容。
支持多种 HTML 元素（a、span、div）。
提供悬停效果，增强交互性。
技术亮点
使用内联 CSS 实现渐变文字样式：linear-gradient、-webkit-text-fill-color 等。
动态悬停效果：改变边框颜色，移除链接下划线。

PHP 的作用
通过 add_action 挂载到主题钩子 astra_header，将 HTML 和 CSS 注入页眉。

*/

function add_test_gradient_text()
{
?>
    <div style="padding: 20px; text-align: center;">
        <h2>测试标题</h2>
        <a href="#" class="gradient-text">Docusaurus 3.6 is out!️ </a>
        <br><br>
        <span class="gradient-text">这是span版渐变文字</span>
        <br><br>
        <div class="gradient-text">这是div版渐变文字</div>
    </div>

    <style>
        .gradient-text {
            background: linear-gradient(90deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            display: inline-block;
            cursor: pointer;
            text-decoration: none;
            padding-bottom: 2px;
            border-bottom: 2px solid transparent;
            transition: border-color 0.3s ease;
            font-size: 2.2em;
            font-weight: 700;
        }


        .gradient-text:hover {
            border-color: #9800ff;
            border-bottom-style: solid;
            border-bottom-width: 2px;
        }

        a.gradient-text:hover {
            text-decoration: none;
        }
    </style>
<?php
}
add_action('astra_header', 'add_test_gradient_text');