css 文本装饰厚度和文本装饰颜色

5fjcxozz  于 2022-12-24  发布在  其他
关注(0)|答案(1)|浏览(187)

在我的笔记本电脑上的Chrome浏览器中,各种文本装饰属性的工作方式是我所希望的。

而不是我希望他们在iOS上的Safari(注意下划线的颜色不是黄色,也不像上面那样厚)。

这是代码,我用Tailwind做CSS。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'red-primary': '#E43C39',
                        'red-secondary': '#E5403D',
                        'yellow-primary': '#F8B334'
                    },
                    fontFamily: {
                        'gibson': 'Gibson, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
                    }
                }
            }
        }
    </script>
</head>
<body>
    <header class="bg-[url('img/bg-placeholder.png')] bg-[#D8D8D8] h-[42rem] bg-center bg-no-repeat bg-cover pt-4 flex flex-col justify-between">
        <nav class="bg-white mx-4 px-3 h-14 rounded-md flex items-center justify-between shadow-custom z-10">
            <div class="w-32 h-12">
                <a href="index.html"><img class="h-full" src="img/logo.png" alt="logo"/></a>
            </div>
            <div id="hamburger-menu" class="h-7 w-9 relative group peer z-10">
                <div class="w-full h-1 absolute top-0 bg-yellow-primary transition-all duration-[600ms] ease-linear group-[.clicked]:-rotate-[315deg] group-[.clicked]:top-1/2 group-[.clicked]:-translate-y-1/2"></div>
                <div class="w-full h-1 absolute top-1/2 -translate-y-1/2 bg-red-primary transition-opacity duration-[800ms] ease-linear group-[.clicked]:opacity-0"></div>
                <div class="w-full h-1 absolute top-full -translate-y-1 bg-yellow-primary transition-all duration-[600ms] ease-linear group-[.clicked]:-rotate-[225deg] group-[.clicked]:top-1/2 group-[.clicked]:-translate-y-1/2"></div>
            </div>
            <div class="fixed w-3/4 top-0 right-0 bg-gray-100 h-screen transition-all duration-500 peer-[.clicked]:right-0">
                <ul class="w-3/4 font-gibson uppercase bold text-xl tracking-[.2rem] mt-20 mx-auto">
                    <li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="index.html">Home</a></li>
                    <li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">Who We Are</a></li>
                    <li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">Locations</a></li>
                    <li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">Job Openings</a></li>
                    <li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">News & Updates</a></li>
                    <li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">Contact Us</a></li>
                </ul> 
            </div>
        </nav>
    </header>
</body>
</html>

我的iPhone运行的是15.7.1版,据我所知,这意味着它也运行的Safari版本15,它支持装饰厚度和装饰颜色属性,所以我不知道为什么它显示不同。
任何想法都很感激。
爱你的凯尔

czq61nw1

czq61nw11#

它应该是hover:decoration-yellow-100而不是hover:decoration-yellow-1。可能这就是它不工作的原因。同样,hover:text-red-1应该是hover:text-red-100
此外,我没有看到完整的代码,所以我不知道为什么它没有为您工作。
Playground

相关问题