光滑的径向梯度边缘卡住答案

【问题标题】：Smooth radial-gradient edge im stuck光滑的径向梯度边缘卡住
【发布时间】：2019-07-20 19:43:20
【问题描述】：

所以我正在处理这个 UI，我决定尝试让它从主肖像圈中弹出，我唯一的问题是我一辈子都无法获得这个径向渐变光滑。

整个问题来自我想要在左侧有一个倒置的边框半径，以便在静止时与纵向圆圈相匹配。我看到了几种不同的方法来做到这一点，但我相当业余，并认为这种径向渐变似乎是最简单的方法。然而，现在我只剩下这个可怕的锯齿状边缘了。

我查看了不同的渐变样式，而不是使用圆形，我尝试将头绕在“Andreas Larsen”的“easing linear gradients”帖子上，但无济于事。

这是一个 JSFiddle，只有显示 UI 的必要代码，如果有人能提供帮助，它对我来说比你知道的更有价值 :) https://jsfiddle.net/Infamoose/thj9305f/1/

编辑：忽略所有不稳定的条和图标，我正在修复它：P 我只是想先在径向渐变部分设置麦克风图标。

.positive {
    color: rgb(114, 204, 114);
}

.negative {
    color: rgb(224, 50, 50);
}

.tempbg {
    background: solid;
    background-color: rgb(0, 122, 204);
}

.portrait {
    background-color: rgb(219, 12, 12);
    position: absolute;
    top: 34px;
    left: 10px;
    width: 120px;
    height: 120px;
    border-radius: 110px;
    z-index: 2;
}

.container {
    background-color: rgba(0, 0, 0, 0.288);
    position: absolute;
    top: 50px;
    left: 100px;
    width: 260px;
    height: 85px;
    border-radius: 50px;
    border-bottom-left-radius: 0%;
    border-top-left-radius: 0%;
    z-index: 1;
}

#heal, #armor, #hunger, #thirst, #stamina, #voice {
}

#boxHeal, #boxArmor, #boxStamina, #boxHunger, #boxThirst, #boxVoice {
    width: 100%;
    height: 100%;
    transition: 0.2s ease-in-out;
}

#heal {
    position: absolute;
    left: 40px;
    bottom: 68px;
    width: 120px;
    height: 10px;
    padding: 0;
    float:left;
}

#armor {
    position: absolute;
    left: 40px;
    bottom: 56px;
    width: 120px;
    height: 10px;
    padding: 0;
    float:left;
}

#hunger {
    position: absolute;
    left: 62px;
    bottom: 32px;
    width: 107.5px;
    height: 10px;
}

.iconhunger {
    position: relative;
    left: -40px;
    bottom: 10px;
    z-index: 3;
    align-content: left;
 }

#thirst {
    position: absolute;
    left: 22px;
    bottom: 61px;
    width: 107.5px;
    height: 10px;
    padding: 0;
    float:left;
}

.iconthirst {
    position: relative;
    left: 0.5px;
    bottom: -34px;
    z-index: 3;
    align-content: left;
 }

#stamina {
    position: absolute;
    left: 62.5px;
    bottom: 11px;
    width: 107.5px;
    height: 10px;
    padding: 0;
    float:left;
}

.iconstamina {
    position: absolute;
    z-index: 3;
    align-content: left;
    left: -20px;
    bottom: 6px;
 }

#voice {
    position: absolute;
    left: 148.5px;
    bottom: -500px;
    width: 107.5px;
    height: 10px;
    padding: 0;
    float:left;
}

.fa-microphone {
    position: inherit;
    z-index: 3;
    left: 57px;
    bottom: 525.5px;
    font-size: 38;
 }

.fa-microphonebg {
    position: absolute;
    top: -575px;
    left: -10px;
    width: 121px;
    height: 85px;
    background-image:
		radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 50px);
		border-top-right-radius: 40px;
		border-bottom-right-radius: 40px;
    z-index: 2;
}

#boxHeal {
    background: rgb(97, 191, 92);
    border: solid 0.3px rgb(97, 191, 92);
    border-radius: 30px;
}

#boxArmor {
    background: rgb(96, 136, 220);
    border: solid 0.3px rgb(96, 136, 220);
    border-radius: 30px;
}

#boxHunger {
    background: rgb(255, 255, 255);
    position: absolute;
    left: -10;
    bottom: 9.7px;
    border: solid 0.3px #ffffff;
    border-radius: 30px;
}

#boxThirst {
    background:rgb(255, 255, 255);
    position: absolute;
    left: 30px;
    bottom: -32;
    border: solid 0.3px #ffffff;
    border-radius: 30px;

}

#boxStamina {
    background: rgb(255, 255, 255);
    position: absolute;
    left: -10px;
    bottom: 5px;
    border: solid 0.3px #ffffff;
    border-radius: 30px;
}

#boxVoice {
    background: rgb(255, 255, 255);
    position: absolute;
    left: -96px;
    bottom: -4px;
    border: solid 0.3px #ffffff;
    border-radius: 30px;
}

#boxVoice.active {
    background: rgb(235, 36, 39);
}

.position {
    font-family: "gta-ui", Verdana, Tahoma;
    font-size: 30px;
    position: absolute;
    bottom: 0.35%;
    left: 16%;
    text-shadow: -1px 1px 2px #000, 1px 1px 2px #000, 1px -1px 0 #000, -1px -1px 0 #000;
    color: #ffffff;
}

.seperator {
    color: rgb(224, 50, 50);
}

.seperator2 {
    color: rgb(240, 200, 80);
}

<html>
    <head>
        <title></title>
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <link href="css/icono.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="https://icono-49d6.kxcdn.com/icono.min.css">
        <script src="https://kit.fontawesome.com/3f31cfc768.js"></script>
    </head>

    <body class="tempbg">
        <div class="portrait">
        </div>
        <div class="container">
            <div id="heal">
                <div id="boxHeal"></div>
            </div>
            <div id="armor">
                <div id="boxArmor"></div>
            </div>
            <div id="hunger">
                    <svg class="iconhunger" width="36" height="12" viewBox="0 0 14 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0)">
                        <path d="M9.44096 7.09788L12.0944 4.62314C13.9855 2.86906 14.0734 1.25095 13.9708 0.462298C13.9561 0.407908 13.9268 0.353518 13.8828 0.312725C13.7656 0.203945 13.5897 0.203945 13.4724 0.312725L12.6954 1.03339L2.94672 10.0893C2.62421 10.3885 2.62421 10.8916 2.94672 11.1907C3.26923 11.4899 3.81164 11.4899 4.13415 11.1907L4.33939 10.946C4.70588 10.4973 6.58232 7.98172 6.86086 7.58739C6.97813 7.42422 7.09541 7.32904 7.18337 7.28825C7.32997 7.23386 7.44724 7.30185 7.44724 7.30185C8.09227 7.65538 8.91321 7.58739 9.44096 7.09788Z" fill="white"/>
                        <path d="M4.95508 6.20047C5.49749 5.9965 5.86398 6.17327 6.09854 6.36364L6.86084 5.65657C6.65561 5.43901 6.46503 5.08547 6.68493 4.59596C6.99278 3.90249 7.242 3.45377 6.17184 2.37957C5.131 1.29176 3.4598 0.285548 2.68283 0.0679876C2.50692 0.027195 2.331 0 2.19906 0C2.1844 0 2.1844 0 2.16974 0C2.12577 0 2.09645 0.0135975 2.06713 0.0407925C1.99383 0.10878 1.99383 0.21756 2.06713 0.27195L4.70587 2.7195C4.83781 2.84188 4.83781 3.04584 4.70587 3.18182C4.57393 3.3042 4.35404 3.3042 4.20744 3.18182L3.89959 2.89627L3.21058 2.25719C2.69749 1.78127 2.36032 1.46853 2.03781 1.22378C1.26084 0.625486 0.95299 0.611888 0.95299 0.611888C0.95299 0.611888 0.835713 0.598291 0.733095 0.679876C0.645137 0.775058 0.659797 0.883838 0.659797 0.883838C0.659797 0.883838 0.674456 1.16939 1.33414 1.90365C1.59802 2.2028 1.93519 2.51554 2.44828 2.99145L3.13728 3.63054L3.44514 3.91608C3.57707 4.03846 3.57707 4.24242 3.44514 4.3784C3.3132 4.50078 3.0933 4.50078 2.94671 4.3784L0.307964 1.93085C0.234666 1.86286 0.117388 1.86286 0.0587496 1.93085C0.0294302 1.95804 0.0147705 1.98524 0.0147705 2.02603C0.0147705 2.02603 0.0147705 2.03963 0.0147705 2.05322C0.0147705 2.1756 0.0440899 2.33877 0.0880689 2.50194C0.307964 3.22261 1.40744 4.75913 2.58022 5.75175C3.73833 6.71717 4.20744 6.48601 4.95508 6.20047Z" fill="white"/>
                        <path d="M9.51434 7.737C9.1625 7.95456 8.73737 8.07694 8.29758 8.07694C8.03371 8.07694 7.78449 8.03614 7.53528 7.95456L10.6138 11.3539C11.0683 11.7619 11.7866 11.7619 12.2264 11.3539C12.6662 10.946 12.6662 10.2661 12.2264 9.85821L9.51434 7.737Z" fill="white"/>
                        </g>
                        </svg> 
                <div id="boxHunger">                           
            </div>
        </div>
            <div id="thirst">
                    <svg class="iconthirst" width="36" height="14" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3.74196 0.100677C3.72525 0.0356591 3.65843 -0.013104 3.57491 0.00315034C3.52479 0.0194047 3.49138 0.0519134 3.47467 0.100677C2.9067 4.55437 0 5.46462 0 8.5692C0.0501155 10.5035 1.68722 12.0476 3.67514 11.9989C5.61294 11.9664 7.16652 10.4385 7.19993 8.5692C7.21663 5.48087 4.30993 4.55437 3.74196 0.100677ZM3.19069 5.02575C3.15728 5.15579 3.10716 5.30207 3.07375 5.44836C2.82317 6.34235 2.52248 7.35013 2.52248 8.52044C2.52248 9.15436 2.13826 9.38192 1.77075 9.38192C1.35312 9.38192 1.01902 9.05683 1.01902 8.65048C1.01902 7.26885 1.70393 6.35861 2.30531 5.56215C2.48907 5.31833 2.67283 5.07451 2.82317 4.84695C2.88999 4.74943 3.00693 4.73317 3.10716 4.79819C3.12387 4.81444 3.14057 4.8307 3.15728 4.84695C3.19069 4.89572 3.20739 4.96073 3.19069 5.02575Z" fill="white"/>
                        </svg>
                <div id="boxThirst"></div>
            </div>
            <div id="stamina">
                    <svg class="iconstamina" width="36" height="12" viewBox="0 0 21 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H16C17.1046 0 18 0.89543 18 2V5.71428C18 6.81885 17.1046 7.71429 16 7.71429H2C0.895431 7.71429 0 6.81886 0 5.71429V2C0 0.895433 0.895429 0 2 0ZM2 1C1.44772 1 1 1.44772 1 2V5.71429C1 6.26657 1.44772 6.71429 2 6.71429H16C16.5523 6.71429 17 6.26657 17 5.71428V2C17 1.44772 16.5523 1 16 1H2ZM19.2857 2.54286C19.2857 2.32194 19.4648 2.14286 19.6857 2.14286C19.9066 2.14286 20.0857 2.32194 20.0857 2.54286V5.17143C20.0857 5.39234 19.9066 5.57143 19.6857 5.57143C19.4648 5.57143 19.2857 5.39234 19.2857 5.17143V2.54286ZM3.14286 2.14286C2.59057 2.14286 2.14286 2.59057 2.14286 3.14286V4.57143C2.14286 5.12371 2.59057 5.57143 3.14286 5.57143H9.14286C9.69514 5.57143 10.1429 5.12371 10.1429 4.57143V3.14286C10.1429 2.59057 9.69514 2.14286 9.14286 2.14286H3.14286Z" fill="white"/>
                        </svg>
                <div id="boxStamina"></div>
            </div>
            <div id="voice">
                <div class="fa-microphonebg">
                    </div>
                    <i class="fas fa-microphone"></i>                   
                <div id="boxVoice"></div>
            </div>
        </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="js/app.js" type="text/javascript"></script>
</html>

【问题讨论】：

简单地避免相同的颜色值，在最后一个加1px：jsfiddle.net/xcw348hn/1

标签： html css user-interface css-gradients

【解决方案1】：

你的问题就在这里：

radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 50px);

您需要在透明层 (rgba(0, 0, 0, 0)) 和白色层 (#fff) 之间分离一个像素，以使这条渐变曲线起作用：

radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 51px);

应该可以解决您的问题。径向渐变很棘手，尤其是当您尝试使用它们制作一些开箱即用的形状时。 :)

【讨论】：

我告诉你，这让我很开心。 :') 我完全不只是花了大约 2-3 个小时试图找出缓和线性渐变和平滑渐变/反转边界半径的不同方法，以便将修复简单地更改为 1px。非常感谢，您至少为我节省了几个小时，因为我可能会继续错过简单的修复
我为你的坚持鼓掌！我已经用 css 写了很多年了，径向渐变有时仍然让我拔掉我的头发！看起来 Temani Afif 也在您的 cmets 中发现了解决方案。确保也给他的评论一个赞成票。 :)
我已经用 CSS 写了大约 2 个星期了，我已经把头发拉出来了，所以掌声都是你的 :P 现在我只需要找出关键帧并制作这一面- bar 的东西只有在按下按钮时才会滑出并显示。
看看这个 fiddle 的实现：它真的很粗糙，但我认为这将是一个很好的起点：jsfiddle.net/webnetvn/p26nvy8j/43
请注意，对 .portrait 进行了更改，从 position:absolute 更改为 position:fixed 以防止其移出屏幕，其余部分已被包装到一些新的 html 元素中，使用复选框作为切换到在没有 javascript 的情况下执行此操作（这是我喜欢所有东西的方式，除了 nodejs）并且随附的 CSS 已添加到底部:)