当前位置： 文江博客话题详情

如何减少径向梯度中的颜色过渡距离？

发布于 2025-02-07 23:10:44 字数 2470 浏览 1 评论 0原文

我试图获得一个白色的圆圈，应该在内部边缘锋利。我想我至少已经做到了。我希望黑色的内表面包含内容（如果可能的话，最好几乎无缝响应）。想象一下我的模板还有更多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>

原文

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.

But now, the white circle on the outer edge should also look quite sharp (not 100% but much sharper than in my example). 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.

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?

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

阳光下的泡沫是彩色的 2025-02-14 23:10:44

当您从55％的下降到10％时，您的梯度规则有些奇怪。实际上，它们应该逐渐更大。我调整了从白色到黑色超过2％的过渡。继续摆弄值，以使其正确。

看看 mdn docs 更好地了解。

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>

Your gradient rules were a bit odd as you went down to 10% from 55%. Really they should be progressively larger. I adjusted to transition from white to black over 2%. Keep fiddling with the values to get it just right.

Have a look at the MDN docs to understand better.

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>

回复 原文
诗笺 2025-02-14 23:10:44

要在梯度圆圈中的频段之间获得某种抗氧化，您可以使用双单元/百分比，值略有变化。

由于圆圈没有直线，因此在将最终值重复为下一个颜色上的启动值时，您会得到锯齿状的边缘。因此，您需要稍微“愚弄”浏览器图形例程，并通过轻微迫使一些圆形差异
从/到距离值的差异不再是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>

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.

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>

回复 原文
~没有更多了~

关于作者

怼怹恏

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

李珊平

文章 0 评论 0

Quxin

文章 0 评论 0

范无咎

文章 0 评论 0

github_ZOJ2N8YxBm

文章 0 评论 0

若言

文章 0 评论 0

南…巷孤猫

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文