CSS - Border还没有显示边框

时间：2017-10-24 12:38:37

标签： html css border

我遇到了一个奇怪的边界问题。我有2个静态高度和宽度的圆形图表。每个圆圈都是通过绘制半圆（使用边框和边框半径）和旋转.spinner到＆＃34;填充＆＃34;来构建的。圈子。

我的问题是，即使使用border-right：none声明，也会在.spinner上显示一个奇怪的细边框。有没有人遇到过这个？或知道可能导致它的原因？

Border on border-right:none

HTML

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

4 个答案:

答案 0 :(得分：2)

这是因为你的CSS转换。

要摆脱这些边框（在Chrome中），您必须添加值为隐藏的-webkit-backface-visibility。这将使他们顺利。

-webkit-backface-visibility: hidden;

以下是 JSFiddle 更新

答案 1 :(得分：1)

尝试-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>

答案 2 :(得分：0)

尝试这样做-

a
{
   outline: none;
}

答案 3 :(得分：-1)

另一种解决方案或更好的说trick是transform: perspective(0px) rotate(200deg);。

<强> JSFiddle

相关问题
最新问题