用CSS画同心圆详细教程

哈喽！今天心血来潮给大家带来了《如何用CSS画同心圆教程》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

纯CSS绘制同心圆有四种方法：一、多层div嵌套配合border-radius和居中；二、单div用box-shadow叠加圆环；三、radial-gradient背景渐变定义边界；四、基础元素加::before/::after伪元素三层叠加。

如果您希望在网页中使用纯CSS技术绘制一组同心圆，可以通过多种CSS技巧实现，无需JavaScript或SVG。以下是几种可行的实现方法：

一、使用border-radius和多层div嵌套

该方法通过设置多个具有相同中心点的圆形div，并控制其宽度、高度与边框半径，使它们视觉上呈现为同心圆结构。外层容器作为定位基准，内层元素通过margin或transform居中对齐。

1、创建一个外层容器，设置width和height相等，并设为relative定位。

2、在容器内添加多个子div，每个子div的width和height均小于父容器，且保持相等。

3、为每个子div设置border-radius: 50%，使其呈正圆形。

4、为每个子div设置margin: auto，配合父容器的text-align: center和display: flex实现居中。

5、为各子div设置不同背景色或边框样式以区分层级，注意所有子div必须共享同一中心坐标。

二、利用box-shadow叠加实现单元素多圆

该方法仅需一个空div元素，通过多次声明box-shadow属性，利用其水平偏移、垂直偏移、模糊半径与扩展半径的组合，在单一元素周围生成多个同心圆环效果。

1、创建一个宽高均为0的div元素，例如。

2、为其设置height: 0; width: 0;，并清除默认内外边距。

3、在CSS中为该元素定义box-shadow属性，格式为：box-shadow: 0 0 0 r1 #color1, 0 0 0 r2 #color2, 0 0 0 r3 #color3;。

4、其中r1、r2、r3为各圆环的半径值，必须按从小到大顺序排列，且不能设置水平或垂直偏移（即前两个参数均为0）。

5、若需实心圆而非环形，可将第一个阴影的模糊半径设为0，扩展半径等于目标半径，并用背景色填充中心点。

三、采用radial-gradient背景渐变绘制

该方法使用CSS径向渐变函数，在单个元素背景中定义多个颜色停止点，通过精确控制色标位置模拟同心圆轮廓或填充区域。

1、创建一个宽高相等的块级元素，如。

2、为其设置background-image属性，使用radial-gradient(circle, color1 0%, color1 r1%, transparent r1%, transparent r2%, color2 r2%, color2 r3%)。

3、在渐变定义中，每对相邻的colorX rX%与transparent rX%构成一个清晰边界，r1、r2、r3须为百分比或像素值，且严格递增。

4、若需多个独立圆面而非过渡效果，可在同一渐变中重复使用相同颜色与透明色交替定义。

5、为确保图形为正圆，必须指定radial-gradient的第一个参数为circle，且容器宽高等值。

四、借助伪元素::before和::after叠加

该方法利用一个基础元素及其两个伪元素，分别设置不同尺寸的圆形样式，三者共用同一中心点，形成三层同心结构。

1、定义一个基础div，设置position: relative; width: 200px; height: 200px; border-radius: 50%;。

2、为该元素添加::before伪元素，设置content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。

3、为::before设置width: 140px; height: 140px; border-radius: 50%; background-color: #f0f0f0;。

4、同理为::after设置更小尺寸，例如width: 80px; height: 80px;，并应用不同背景色。

5、所有元素的transform: translate(-50%, -50%)必须保留，否则无法保证几何中心重合。

理论要掌握，实操不能落！以上关于《用CSS画同心圆详细教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！