html - 光滑的径向渐变边缘我卡住了

Question

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

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

我研究了不同的渐变样式而不是使用圆圈，我尝试围绕着“Andreas Larsen”的“easing linear gradients”帖子，但无济于事。

这是一个 JSFiddle，其中只有显示 UI 的必要代码，如果有人可以提供帮助，它对我来说比你知道的更有值(value):) 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);

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