如何減少徑向漸變中的顏色過渡距離？
[英]How can I reduce the color transition distance in my radial gradient?
問題描述
我正在嘗試獲得一個內部邊緣應該鋒利的白色圓圈。 我想我至少做到了這一點。 我希望黑色內表面包含內容（最好幾乎無縫且響應迅速 - 如果可能的話）。 想象一下我的模板還有 10-20 個復選框。
但是現在，外邊緣的白色圓圈也應該看起來很銳利（不是 100%，但比我的示例中銳利得多）。 因此，最小的過渡應該在外邊緣（但不是在內邊緣）上保持可見。 當我得到正確的 CSS 時，我將不得不試驗白色圓圈的厚度，但我不希望白色圓圈太厚。
但我無法以某種方式管理...
我必須指定哪些 CSS 值才能使白色圓圈在其外邊緣更清晰，而黑色內表面包圍內容？
感謝您提前做出的任何努力。 :)
body { font-size: 21px; font-family: Tahoma, Geneva, sans-serif; max-width: 550px; margin: 0 auto; background-image: radial-gradient(circle, black 54%, white 50%, white 10%, black, black); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } html { scroll-behavior: smooth; } h1 { font-size: 30px; color: white; text-align: center; margin: 40px 0 20px 0; } input { position: absolute; left: -100vw; } label { display: block; padding: 8px 22px; margin: 0 0 1px 0; cursor: pointer; background: #181818; border: 1px solid white; border-radius: 5px; color: #FFF; position: relative; } label:hover { background: white; border: 1px solid white; color: black; } label::after { content: '+'; font-size: 22px; font-weight: bold; position: absolute; right: 10px; top: 2px; } input:checked+label::after { content: '-'; right: 14px; top: 3px; } .content { background: #DBEECD; background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD); background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD); background: linear-gradient(to top left, #DBEECD, #EBD1CD); padding: 10px 25px 10px 25px; border: 1px solid #A7A7A7; margin: 0 0 1px 0; border-radius: 1px; } input+label+.content { display: none; } input:checked+label+.content { display: block; }
<body> <h1>My Testwebsite</h1> <input type="checkbox" id="title1" name="contentbox" /> <label for="title1">Content 1</label> <div class="content"> My Content 1 </div> <input type="checkbox" id="title2" name="contentbox" /> <label for="title2">Content 2</label> <div class="content"> My Content 2 </div> <input type="checkbox" id="title3" name="contentbox" /> <label for="title3">Content 3</label> <div class="content"> My Content 3 </div> </body>
2 個解決方案
解決方案1
2 已采納 2022-06-16 14:34:26
當你從 55%下降到 10% 時，你的梯度規則有點奇怪。 實際上，它們應該逐漸變大。 我調整為從白色過渡到黑色超過 2%。 繼續擺弄價值觀以使其恰到好處。
查看MDN 文檔以更好地理解。
body { font-size: 21px; font-family: Tahoma, Geneva, sans-serif; max-width: 550px; margin: 0 auto; background-image: radial-gradient(circle, black 54%, white 55%, white 70%, black 72%, black ); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } html { scroll-behavior: smooth; } h1 { font-size: 30px; color: white; text-align: center; margin: 40px 0 20px 0; } input { position: absolute; left: -100vw; } label { display: block; padding: 8px 22px; margin: 0 0 1px 0; cursor: pointer; background: #181818; border: 1px solid white; border-radius: 5px; color: #FFF; position: relative; } label:hover { background: white; border: 1px solid white; color: black; } label::after { content: '+'; font-size: 22px; font-weight: bold; position: absolute; right: 10px; top: 2px; } input:checked+label::after { content: '-'; right: 14px; top: 3px; } .content { background: #DBEECD; background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD); background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD); background: linear-gradient(to top left, #DBEECD, #EBD1CD); padding: 10px 25px 10px 25px; border: 1px solid #A7A7A7; margin: 0 0 1px 0; border-radius: 1px; } input+label+.content { display: none; } input:checked+label+.content { display: block; }
<body> <h1>My Testwebsite</h1> <input type="checkbox" id="title1" name="contentbox" /> <label for="title1">Content 1</label> <div class="content"> My Content 1 </div> <input type="checkbox" id="title2" name="contentbox" /> <label for="title2">Content 2</label> <div class="content"> My Content 2 </div> <input type="checkbox" id="title3" name="contentbox" /> <label for="title3">Content 3</label> <div class="content"> My Content 3 </div> <div class="content"> My Content 9 </div> </body>
解決方案2
0 2022-06-16 15:00:13
要在漸變圓中的波段之間獲得某種抗鋸齒，您可以使用雙倍單位/百分比，值的變化很小。
由於圓圈沒有直線，因此在將結束值重復為下一種顏色的起始值時，您將獲得鋸齒狀邊緣。 因此，您需要稍微“愚弄”瀏覽器圖形例程，並通過從/到距離值不超過 0.5% 或 1px 或您使用的任何單位的細微差異來強制進行一些舍入差異。
喜歡：
color 1: 10%
color 2: 10.5% 20%
color 3: 20.5% 30%
etc...
我復制了你的代碼片段，用綠色表示白色，用紅色表示黑色，以顯示工作中的抗鋸齒：
body { font-size: 21px; font-family: Tahoma, Geneva, sans-serif; max-width: 550px; margin: 0 auto; background-image: radial-gradient( circle, black 54%, white 54.5% 55%, green 55.5% 65%, black 65.5%, red ); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } html { scroll-behavior: smooth; } h1 { font-size: 30px; color: white; text-align: center; margin: 40px 0 20px 0; } input { position: absolute; left: -100vw; } label { display: block; padding: 8px 22px; margin: 0 0 1px 0; cursor: pointer; background: #181818; border: 1px solid white; border-radius: 5px; color: #FFF; position: relative; } label:hover { background: white; border: 1px solid white; color: black; } label::after { content: '+'; font-size: 22px; font-weight: bold; position: absolute; right: 10px; top: 2px; } input:checked+label::after { content: '-'; right: 14px; top: 3px; } .content { background: #DBEECD; background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD); background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD); background: linear-gradient(to top left, #DBEECD, #EBD1CD); padding: 10px 25px 10px 25px; border: 1px solid #A7A7A7; margin: 0 0 1px 0; border-radius: 1px; } input+label+.content { display: none; } input:checked+label+.content { display: block; }
<h1>My Testwebsite</h1> <input type="checkbox" id="title1" name="contentbox" /> <label for="title1">Content 1</label> <div class="content"> My Content 1 </div> <input type="checkbox" id="title2" name="contentbox" /> <label for="title2">Content 2</label> <div class="content"> My Content 2 </div> <input type="checkbox" id="title3" name="contentbox" /> <label for="title3">Content 3</label> <div class="content"> My Content 3 </div>
如何將該字體真棒（v5.0）顏色從白色過渡到自定義顏色？
[英]How can I transition this font awesome (v5.0) color from white to my custom color?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.