css圆环背景嵌套 |css轮播图的左右箭头怎么弄

.outer {
width: 200px;
height: 200px;
background-color: #f2f2f2;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.inner .icon {
width: 100px;
height: 100px;
background-color: #f2f2f2;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}

首先，大家需要创建一个外层容器，使用border-radius属性将其圆角化。利用flex布局的方式，让内部元素垂直居中。

然后，在外层容器中创建一个内层元素，同样使用border-radius属性将其圆角化。将内层元素背景设置为白色，同样的使用了flex布局，保证元素内部的图标居中。

最后，在内层元素中创建一个圆形的图标，使用背景颜色填充。同样使用了flex布局，保证图标内部的内容居中。

通过这种方式可以实现简单的圆环背景嵌套效果。如果需要更复杂的效果，可以通过调整圆环内外元素的宽度、高度、颜色等属性，进一步调整效果。