css实现有缺口的圆形

CSS是网页开发中最重要的技术之一，它能够实现各种各样的效果。在网页开发中，有时候需要将圆形中间留出一部分空白，这种被称为“有缺口”的圆形在美术设计和页面布局中很常见。本文将介绍CSS实现有缺口的圆形技巧。

.circle {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  background-color: #444;
}

.circle::before,.circle::after {
  content: '';
  width: 100px;
  height: 200px;
  position: absolute;
  top: 0;
  border-radius: 0 50% 50% 0;
}

.circle::before {
  left: 0;
  background-color: #fff;
}

.circle::after {
  right: 0;
  background-color: #444;
}

代码中，我们首先定义了一个圆形元素.circle，它的宽高都是200px，圆角半径是50%，背景色为#444。然后，我们用伪元素::before和::after来实现缺口效果。这两个伪元素都是绝对定位，宽度为100px，高度为200px，其中before元素在左边，background-color为白色，after元素在右边，background-color为#444。

两个伪元素的border-radius分别设为0 50% 50% 0，这样before元素就成了左半圆，after元素成了右半圆，而且都与.circle元素的圆角半径吻合。于是有缺口的圆形就出现了。

使用以上代码，我们可以轻松地实现该效果，而且代码比较简单易懂。CSS的伪元素技术可以让页面布局更具灵活性，想必将在你的网页开发工作中发挥很大作用。