平滑的径向梯度边缘被卡住
[英]Smooth radial-gradient edge im stuck
问题描述
所以我正在研究这个用户界面，我决定尝试让它从主肖像圈弹出，我唯一的问题是我无法让这个径向渐变变得平滑。
整个问题来自我想要左侧的倒置边界半径，以便在静止时与人像圆相匹配。 我看到了几种不同的方法来做到这一点，但我相当业余，认为这种径向渐变似乎是最简单的方法。 然而，现在我留下了这个可怕的锯齿状边缘。
我查看了不同的渐变样式，而不是使用圆，我尝试将我的头围绕在“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>
1 个解决方案
解决方案1
2 已采纳 2019-07-20 11:43:20
你的问题就在这里：
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);
应该解决你的问题。 径向渐变很棘手，尤其是当您尝试使用它们制作一些开箱即用的形状时。 :)
CSS animation 不平滑，带有径向渐变背景
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.