CSS

Question

我运行遇到了一个奇怪的边界问题。我有 2 个静态高度和宽度的圆图。每个圆都是通过绘制半圆（使用边框和边框半径）并将 .spinner 旋转到 "fill" 圆来构建的。

我的问题是，即使声明了 border-right:none，.spinner 上也会出现奇怪的细边框。有人运行以前参与过这个吗？或者知道是什么原因造成的？

Border on border-right:none

HTML

.chart__wrapper {
  position: relative;
  height: 200px;
  width: 200px;
  cursor: pointer;
}

.wrapper {
  position: absolute;
  background: transparent;
  z-index: 11;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.wrapper .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: transparent;
  border: 15px solid #0071BB;
}

.wrapper .spinner {
  border-top-left-radius: 200px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 200px;
  z-index: 200;
  border-right: none;
}

.wrapper .filler {
  border-top-left-radius: 0px;
  border-top-right-radius: 200px;
  border-bottom-right-radius: 200px;
  border-bottom-left-radius: 0px;
  left: 50%;
  z-index: 100;
  border-left: none;
}

.wrapper .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: #FFFFFF;
  z-index: 300;
}

.wrapper,
.wrapper * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.sub__wrapper {
  position: absolute;
  background: #FFFFFF;
  background: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.sub__wrapper .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: #FFFFFF;
  background: transparent;
  border: 15px solid #009CDD;
}

.sub__wrapper .spinner {
  border-top-left-radius: 150px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 150px;
  z-index: 10;
  border-right: none;
}

.sub__wrapper .filler {
  border-top-left-radius: 0px;
  border-top-right-radius: 150px;
  border-bottom-right-radius: 150px;
  border-bottom-left-radius: 0px;
  left: 50%;
  z-index: 9;
  border-left: none;
}

.sub__wrapper .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: #FFFFFF;
  z-index: 12;
}

.value {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 500;
  transform: translate(-50%, -50%);
  font-size: 36px;
  text-align: center;
}

.value .progress__label {
  font-size: 16px;
}

.sub__wrapper,
.sub__wrapper * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.sub__wrapper:hover .spinner,
.sub__wrapper:hover .filler,
.sub__wrapper:hover .mask {
  animation-play-state: running;
}

<div class="chart__wrapper">
  <div class="wrapper">
    <div>
      <div class="spinner pie" style="transform: rotate(345deg);"></div>
      <div class="filler pie" style="opacity: 1;"></div>
      <div class="mask" style="opacity: 0;"></div>
    </div>
  </div>
  <div class="sub__wrapper">
    <div>
      <div class="spinner pie" style="transform: rotate(200deg);"></div>
      <div class="filler pie" style="opacity: 1;"></div>
      <div class="mask" style="opacity: 0;"></div>
    </div>
  </div>
</div>

JSFiddle：https://jsfiddle.net/q0wf7hxm/3/

Answer 1

这是因为你的 CSS 转变。

要去除这些边框（在 Chrome 中），您必须添加 -webkit-backface-visibility 并设置隐藏值。这将使它们变得平滑。

-webkit-backface-visibility: hidden;

这是你的JSFiddle更新

Answer 2

尝试-webkit-backface-visibility: hidden;

.chart__wrapper {
  position: relative;
  height: 200px;
  width: 200px;
  cursor: pointer;
}

.wrapper {
  position: absolute;
  background: transparent;
  z-index: 11;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.wrapper .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: transparent;
  border: 15px solid #0071BB;
}

.wrapper .spinner {
  border-top-left-radius: 200px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 200px;
  z-index: 200;
  border-right: none;
  -webkit-backface-visibility: hidden;
}

.wrapper .filler {
  border-top-left-radius: 0px;
  border-top-right-radius: 200px;
  border-bottom-right-radius: 200px;
  border-bottom-left-radius: 0px;
  left: 50%;
  z-index: 100;
  border-left: none;
  -webkit-backface-visibility: hidden;
}

.wrapper .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: #FFFFFF;
  z-index: 300;
}

.wrapper,
.wrapper * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.sub__wrapper {
  position: absolute;
  background: #FFFFFF;
  background: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.sub__wrapper .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: #FFFFFF;
  background: transparent;
  border: 15px solid #009CDD;
}

.sub__wrapper .spinner {
  border-top-left-radius: 150px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 150px;
  z-index: 10;
  border-right: none;
  -webkit-backface-visibility: hidden;
}

.sub__wrapper .filler {
  border-top-left-radius: 0px;
  border-top-right-radius: 150px;
  border-bottom-right-radius: 150px;
  border-bottom-left-radius: 0px;
  left: 50%;
  z-index: 9;
  border-left: none;
}

.sub__wrapper .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: #FFFFFF;
  z-index: 12;
}

.value {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 500;
  transform: translate(-50%, -50%);
  font-size: 36px;
  text-align: center;
}

.value .progress__label {
  font-size: 16px;
}

.sub__wrapper,
.sub__wrapper * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.sub__wrapper:hover .spinner,
.sub__wrapper:hover .filler,
.sub__wrapper:hover .mask {
  animation-play-state: running;
}

<div class="chart__wrapper">
  <div class="wrapper">
    <div>
      <div class="spinner pie" style="transform: rotate(345deg);"></div>
      <div class="filler pie" style="opacity: 1;"></div>
      <div class="mask" style="opacity: 0;"></div>
    </div>
  </div>
  <div class="sub__wrapper">
    <div>
      <div class="spinner pie" style="transform: rotate(200deg);"></div>
      <div class="filler pie" style="opacity: 1;"></div>
      <div class="mask" style="opacity: 0;"></div>
    </div>
  </div>
</div>

Answer 3

试试这个 -

a
{
   outline: none;
}

CSS - 边框 none 仍然显示边框

CSS - Border none still showing a border

html

border