相关疑难解决方法(0)

我有一个position:relative带有position:absolute红色克隆的绿色环:before和覆盖它们的position:absolute白色克隆:after(因为它们位于同一个地方并具有相同的大小).

问题是:它在测试的两个浏览器(Chrome和Firefox)上都会出现问题,我仍然可以看到白色蒙版下的绿色/红色环.让绿色环overflow:hidden部分修复除去外部流血的问题; 但内部出血边界仍然存在.

为什么会发生这种情况,我怎么能完全隐藏下面的圆圈呢？

Codepen

body {
  background: lavender;
}

#ring {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid green;
}

#ring:before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border: 50px solid red;
  border-radius: 50%;
}

#ring:after {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid …

我需要使用HTML/CSS渲染一些文本而不需要任何屏幕平滑或锯齿,或任何类型的东西.使用此字体呈现的文本也需要具有轮廓.用例是我希望使用文本的主体的背景颜色作为外部应用程序的透明度键,我希望文本是实心和清晰的,没有任何平滑.这就是目前的样子:

我正在使用电子开发应用程序.我曾尝试一切从text-rendering: optimizeSpeed和font-smooth: never渲染使用HTML5画布的内容,但我似乎无法得到输出我想,这恐怕正是这样,这是从一个应用程序中使用C#言:

两幅图像都放大了1000%.是否可以使用HTML/CSS？如果没有,我能得到的最接近的是什么？

文本以外的 SVG 形状受shape-rendering可以设置为crispEdges值的属性的影响（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering）。这个值似乎关闭了抗锯齿。

但文本仅受text-rendering. 但是，这不提供crispEdges值（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-rendering）。为什么？有没有另一种方法来获得非抗锯齿？