CSS径向渐变曲线1像素glitch修复及原型样式匹配咨询

一、修复1像素Glitch边框 #

将渐变的颜色停止点从100%调整为100.1%，覆盖浏览器亚像素渲染的边缘区域，彻底解决尺寸变化时的边框闪烁问题。

二、调整曲线贴近原型样式 #

把当前使用的radial-gradient(farthest-side)改为radial-gradient(circle)，生成更圆润的弧形，匹配原型的曲线效果。

修改后的完整代码 #

<nav class="navbar navbar-expand-lg">
    <div class="container-fluid" style="background-image: linear-gradient(135deg, #3ab3da , #6858a2);">
        <div class="row w-100">
            <div class="col-md-4 p-0">
                <div class="container h-50 d-flex align-items-center" style="background: white;">
                    <div class="row w-100">
                        <div class="col-lg-4 p-0">
                        </div>
                        <div class="col-lg-8 col-12 p-0">
                            <img class="img-fluid pb-3" src="<?php echo wp_get_attachment_image_src(25, "thumbnail")[0]; ?>" style="" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-1">
                <div class="row h-25" style="background: white"></div>
                <div class="row h-25" style="background: radial-gradient(circle at top left, white 100.1%, transparent 100.1%) bottom right;"></div>
                <div class="row h-75"></div>
            </div>
            
            <div class="col-md-1">
                <div class="row h-25" style="background: radial-gradient(circle at bottom right, transparent 100.1%, white 100.1%) top left;"></div>
                <div class="row h-25"></div>
                <div class="row h-75"></div>
            </div>
                
            <div class="col-md-6">
                <div class="row mt-3">
                    <div class="row">
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent_b" aria-controls="navbarSupportedContent_b" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse text-uppercase fw-bold my-5" id="navbarSupportedContent_b" style="font-size: 24px;">
                            <?php
                                wp_nav_menu([
                                    "menu"              => "Main menu",
                                    "container"         => "",
                                    "theme_location"    => "primary",
                                    "items_wrap"        => '<ul class="navbar-nav text-sm-center me-auto mb-2 mb-lg-0">%3$s</ul>'
                                ]);
                            ?>
                        </div>
                    </div>
                </div>
                <div class="row mt-1 mb-5">
                    <div class="col-md-4">
                        <i class="fa-solid fa-location-dot mx-4"></i>xxx
                    </div>

                    <div class="col-md-4 border-start border-end">
                        <i class="fa-solid fa-phone mx-4"></i> (+48) yyy
                    </div>

                    <div class="col-md-4">
                        <i class="fa-regular fa-envelope mx-4"></i> zzz@zz.pl
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

在线演示修改版（简化） #

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg">
    <div class="container-fluid" style="background-image: linear-gradient(165deg, #3ab3da , #6858a2);">
        <div class="row w-100">
            <div class="col-md-4 p-0">
                <div class="container h-50 d-flex align-items-center" style="background: white;">
                    <div class="row w-100">
                        <div class="col-lg-4 p-0">
                        </div>
                        <div class="col-lg-8 col-12 p-0">
                            foto
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-1">
                <div class="row h-25" style="background: white"></div>
                <div class="row h-25" style="background: radial-gradient(circle at top left, white 100.1%, transparent 100.1%) bottom right;"></div>
                <div class="row h-75"></div>
            </div>
            
            <div class="col-md-1">
                <div class="row h-25" style="background: radial-gradient(circle at bottom right, transparent 100.1%, white 100.1%) top left;"></div>
                <div class="row h-25"></div>
                <div class="row h-75"></div>
            </div>
                
            <div class="col-md-6">
                <div class="row mt-3">
                    <div class="row">
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent_b" aria-controls="navbarSupportedContent_b" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse text-uppercase fw-bold my-5" id="navbarSupportedContent_b" style="font-size: 24px;">
                            <ul class="navbar-nav text-sm-center me-auto mb-2 mb-lg-0">
                                <li class="nav-item mx-4"><a href="#">Strona główna</a></li>
                                <li class="nav-item mx-4"><a href="#" aria-current="page">Sklep</a></li>
                                <li class="nav-item mx-4"><a href="#">O nas</a></li>
                                <li class="nav-item mx-4"><a href="#">Kontakt</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row mt-1 mb-5">
                    <div class="col-md-4">
                        <i class="fa-solid fa-location-dot mx-4"></i>adres
                    </div>

                    <div class="col-md-4 border-start border-end">
                        <i class="fa-solid fa-phone mx-4"></i> telefon
                    </div>

                    <div class="col-md-4">
                        <i class="fa-regular fa-envelope mx-4"></i> kontakt
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
</body>
</html>

进阶优化（若圆形渐变仍不匹配原型） #

如果需要更贴合的自定义曲线，可使用clip-path实现：

/* 示例：替换左侧渐变容器样式，根据原型弧度调整坐标 */
.row.h-25 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
    background: white;
}

内容的提问来源于stack exchange，提问作者Radek_pl