我似乎无法摆脱这个圆圈上半部分的薄白色轮廓.关于如何修复它的任何想法？
JSFiddle Demo
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>
解决方法
你看到了这个,因为包含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/
之前：
后：
