html - 光滑的径向梯度边缘卡住

Question

所以我正在研究这个用户界面，我决定尝试让它从主肖像圈中弹出，我唯一的问题是我无法让这个径向渐变变得平滑。

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

我已经查看了不同的渐变样式而不是使用圆形，并且尝试将头绕在“Andreas Larsen”的“缓和线性渐变”帖子上，但无济于事。

这是一个 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>

Answer 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);

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