css凹进去的圆怎么做

CSS中，通过border-radius属性可以创建圆形或椭圆形的元素。但是，在某些情况下，可能需要创建凹进去的圆。这种效果可以通过CSS的Box-shadow、inset和border属性相结合来实现。

首先，需要创建一个圆形的元素：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

接下来，使用Box-shadow属性在元素内部添加阴影，并设置inset属性使其成为元素内部的阴影。这时需要使用负值来使阴影缩小，从而实现凹进去的效果：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  Box-shadow: inset 0 0 10px rgba(0,0.5);
}

运行效果如下：

但是，这样做只是实现了凹进去的效果，并没有使其成为完整的圆形。为了使其成为完整的圆形，并且凹进去的部分与圆形边缘重合，需要使用border属性：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  Box-shadow: inset 0 0 10px rgba(0,0.5);
  border: 5px solid white;
}

运行效果如下：

这时，可以看到元素成为了一个完整的凹进去的圆形。可以通过调整Box-shadow和border的值，来实现不同样式的圆形。同时，可以将其应用于各种交互性设计，如按钮、表单和UI组件等。