Question

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

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

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

Answer 1

您看到了这一点，因为包含的div .circle有一个白色背景，正在泄漏。您可以通过删除包含div上的背景并为白色半圆添加第二个div来解决此问题：

<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

后：

enter image description here

Answer 2

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

<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/

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

2 个答案: