如何摆脱这个圆圈上半部分的薄白色轮廓？

我似乎无法摆脱这个圈子上半部分的薄白色轮廓。任何想法如何解决它？ JSFiddle Demo 如何摆脱这个圆圈上半部分的薄白色轮廓？

body { 
 
     background-color: black; 
 
     padding:50px; 
 
    } 
 
    .square { 
 
     background-color: white; 
 
     margin-bottom: 20px; 
 
     height: 200px; 
 
\t \t width: 200px; 
 
\t \t overflow: hidden; 
 
\t \t } 
 
    .halfSquare { 
 
\t \t background-color: #462a04; 
 
\t \t height: 100px; 
 
\t \t width: 200px; 
 
\t \t } 
 
    .circle { 
 
\t  background-color: white; 
 
\t \t height: 200px; 
 
\t \t width: 200px; 
 
\t \t border-radius: 50%; 
 
\t \t overflow: hidden; 
 
\t \t } 
 
    .halfCircle { 
 
\t \t background-color: #462a04; 
 
\t \t height: 100px; 
 
\t \t width: 200px; 
 
\t \t }

<body> 
 
    <div class="square"><div class="halfSquare"></div></div> 
 
    <div class="circle"><div class="halfCircle"></div></div> \t 
 
</body>

来源

2015-05-20 NewsletterPoll

伊莫你不能，如果你建立这种方式。白色像素点应该是这样的点，其中“棕色像素”至少会出现在容器盒外（小于一个像素）。因此它会溢出并且溢出被隐藏。所以浏览器改为显示容器。 – delbertooo

你看到这一点，因为包含div .circle有一个白色的背景，这是通过泄漏。

<div class="square"><div class="halfSquare"></div></div> 
<div class="circle"> 
    <div class="halfCircle"></div> 
    <div class="halfCircle2"> 
</div></div> 

.circle { 
    height: 200px; 
    width: 200px; 
    border-radius: 50%; 
    overflow: hidden; 
} 
.halfCircle { 
    background-color: #462a04; 
    height: 100px; 
    width: 200px; 
} 
.halfCircle2 { 
    background-color: white; 
    height: 100px; 
    width: 200px; 
}

https://jsfiddle.net/v9bLfkpx/1/

前：

enter image description here

后：您可以通过取消对包含div的背景和添加第二个div为白色半圆解决这个

enter image description here

来源

2015-05-20 22:45:34 garryp

https://jsfiddle.net/Hastig/v9bLfkpx/4/ –

感谢garryp这对我有用。任何想法为什么它发生在一个圆圈，但不是一个正方形？ – NewsletterPoll

@NewsletterPoll它不会在一个正方形上发生，因为容器的像素和所包含的像素是相互重合的，但是当它是一个曲线段时不会出现这种精确的重合，所以它对于肉眼来说显而易见。 – user2755140

容器必须透明。白色边框是由于容器具有白色背景的事实。这样来做：

<div class="square"><div class="halfSquare"></div></div> 
<div class="circle"> 
    <div class="halfCircle2"></div> 
    <div class="halfCircle1"></div> 
</div>

和CSS：

 .circle { 
      height: 200px; 
      width: 200px; 
      border-radius: 50%; 
      overflow: hidden; 
     } 
     .halfCircle2 { 
      background-color: #462a04; 
      height: 100px; 
      width: 200px; 
     } 
     .halfCircle1 { 
      background-color: white; 
      height: 100px; 
      width: 200px; 
     }

小提琴：https://jsfiddle.net/v9bLfkpx/3/

来源

2015-05-20 22:49:05 user2755140

如何摆脱这个圆圈上半部分的薄白色轮廓？

回答

相关问题