效果
原理
解说：
利用一个大的盒子，利用border-radius:50%;设置为一个圆，在大的盒子里面放一个1号盒子（宽是大盒子一半，高度等同大盒子）在左边，利用border-radius左上和左下设值右上右下为0；右边在放一个2号盒子（宽是大盒子一半，高度等同大盒子）在右边，利用border-radius右上和右下设值左上左下为0。
利用子绝父相原理，大盒子相对定位，3号盒子和4号盒子都利用绝对定位（宽高都为父盒子的一半），在3号盒子里面再放一个5号盒子，实现垂直水平居中。在4号盒子里面放5号盒子，实现垂直水平居中。就完成了。
最后令1和3、6背景颜色为黑色。2、4、5背景颜色为黑色背景为白色即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content&#
最低0.47元/天 解锁文章
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
