如何减少径向渐变中的颜色过渡距离？
[英]How can I reduce the color transition distance in my radial gradient?
问题描述
I'm trying to get a white circle that should be razor sharp on the inner edge.
我正在尝试获得一个内部边缘应该锋利的白色圆圈。 I think I have managed at least that.我想我至少做到了这一点。 I want the black inner surface to contain the content (preferably almost seamlessly and responsive - if possible).我希望黑色内表面包含内容（最好几乎无缝且响应迅速 - 如果可能的话）。 And imagine my template had 10-20 more checkboxes.想象一下我的模板还有 10-20 个复选框。
But now, the white circle on the outer edge should also look quite sharp (not 100% but much sharper than in my example).但是现在，外边缘的白色圆圈也应该看起来很锐利（不是 100%，但比我的示例中锐利得多）。 So a minimal transition should remain visible on the outer edge (but not on the inner edge).因此，最小的过渡应该在外边缘（但不是在内边缘）上保持可见。 I'll have to experiment with the thickness of the white circle when I get the CSS right, but I don't want the white circle to be too thick.当我得到正确的 CSS 时，我将不得不试验白色圆圈的厚度，但我不希望白色圆圈太厚。
But I can't manage that somehow...但我无法以某种方式管理...
Which CSS values do I have to specify so that the white circle is sharper on its outer edge and that the black inner surface encloses the content?我必须指定哪些 CSS 值才能使白色圆圈在其外边缘更清晰，而黑色内表面包围内容？
Thanks for any effort in advance.感谢您提前做出的任何努力。 :) :)
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
Your gradient rules were a bit odd as you went down to 10% from 55%.当你从 55%下降到 10% 时，你的梯度规则有点奇怪。 Really they should be progressively larger.实际上，它们应该逐渐变大。 I adjusted to transition from white to black over 2%.我调整为从白色过渡到黑色超过 2%。 Keep fiddling with the values to get it just right.继续摆弄价值观以使其恰到好处。
Have a look at the MDN docs to understand better.查看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
To get some kind of anti-aliassing between bands in a gradient circle, you can use double units/percentages with the slightest of variations in values.要在渐变圆中的波段之间获得某种抗锯齿，您可以使用双倍单位/百分比，值的变化很小。
As circles don't have straight lines you will get jagged edges when repeating end values as start values on a next colors.由于圆圈没有直线，因此在将结束值重复为下一种颜色的起始值时，您将获得锯齿状边缘。 Therefore you need to 'fool' the browser graphics routines a bit and force some rounding differences by slight differences in the from/to distance values of no more that 0.5% or 1px, or whatever unit you use.因此，您需要稍微“愚弄”浏览器图形例程，并通过从/到距离值不超过 0.5% 或 1px 或您使用的任何单位的细微差异来强制进行一些舍入差异。
Like:喜欢：
color 1: 10%
color 2: 10.5% 20%
color 3: 20.5% 30%
etc...
I copied your snippet and used green for white and red for black to show the anti-aliassing at work:我复制了你的代码片段，用绿色表示白色，用红色表示黑色，以显示工作中的抗锯齿：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.