如何擺脫這個圓圈上半部分的薄白色輪廓？

我似乎無法擺脫這個圈子上半部分的薄白色輪廓。任何想法如何解決它？ 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

如何擺脫這個圓圈上半部分的薄白色輪廓？

回答

相關問題