css：从覆盖的边框中删除“阴影”答案

【问题标题】：css: Removing "shadows" from covered borderscss：从覆盖的边框中删除“阴影”
【发布时间】：2019-04-12 04:24:54
【问题描述】：

我试图用 CSS 和 HTML 显示半圆的一部分，但在被覆盖的边框周围总是有一点“阴影”。这是我的codepen，显示我在说什么。不应显示右侧的红色。也许这是浏览器的错误。我在 Firefox 和 Chrome 上试过。这是示例代码：

CSS:
.background {
  width: 100%;
  height: 500px;
  border: 1px solid black;
  background-color: black;
}

.circle {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid black;
  border-bottom: 3px solid red;
  transform: rotate(-20deg);
  z-index: 0;
}

.cover {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid black;
  border-bottom: 3px solid transparent;
  transform: rotate(20deg);
  z-index: 10;
}

HTML:
<div class="background">
  <div class="cover"></div>
  <div class="circle"></div>  
</div>

【问题讨论】：

标签： css google-chrome firefox browser border

【解决方案1】：

您似乎不需要这两个转换。试试这个：

.background {
  width: 100%;
  height: 500px;
  border: 1px solid black;
  background: black;
}

.circle {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid black;
  border-bottom: 3px solid red;
  /*   transform: rotate(-20deg); */
  z-index: 0;
}

.cover {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid black;
  border-bottom: 3px solid transparent;
  /*   transform: rotate(20deg); */
  z-index: 10;
}

【讨论】：

我需要旋转，因为半圆的尺寸对我的工作至关重要。
您可以调整圆圈的尺寸，但老实说，您可能想考虑改用svg
是的，你是对的，但是浏览器的行为很奇怪。