css两个圆拼接 |获取元素的css工具

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}
.left {
background-color: red;
float: left;
}
.right {
background-color: blue;
float: right;
}

上面的代码中，大家首先定义了一个.circle类，它设置了一个宽高为100px的正方形并使圆角半径为50%。接着，大家定义了两个类，.left和.right，分别代表左侧和右侧的圆。

在.left和.right类中，大家分别为它们设置了不同的背景颜色，并利用CSS的float属性让它们分别在页面的左侧和右侧浮动，接着就可以将它们拼接在一起构成一个整体了。

下面是html代码：

<div class="circle">
<div class="left"></div>
<div class="right"></div>
</div>

大家将.circle作为容器，然后将.left和.right分别放在左侧和右侧。由于大家已经为.left和.right定义了float属性，这样它们就会浮动到最左侧和最右侧。

最后，大家就可以通过浏览器来预览这个效果了。通过上面的代码，大家成功地将两个圆拼接成一个了。