Question

我正在尝试用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>

Answer 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;
}

CSS：从覆盖的边界中删除“阴影”

1 个答案: