css: удаление "теней" с закрытых границ - PullRequest
Новая
       30

css: удаление "теней" с закрытых границ

0 голосов
/ 08 ноября 2018

Я пытаюсь показать часть полукруга с помощью CSS и HTML, но всегда есть небольшая «тень», которая сохраняется вокруг закрытой границы. Это мой кодовый блок , который показывает, что я говорю. Красный справа не должен быть показан. Может быть, это ошибка браузера. Я попробовал это на 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>

1 Ответ

0 голосов
/ 08 ноября 2018

Не похоже, что вам нужны эти два преобразования. Попробуйте это: 

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