Css 圆圈周围有文字的线条

如何在包含每行文字的圆圈周围划线。我不希望文本在伪类中。下面是所需的输出图像

下面的代码是我从Paulie_D以前的解决方案中尝试的代码

.outCircle{
宽度：20px；
高度：20px；
背景颜色：浅蓝色；
位置：相对位置；
边界半径：50%；
保证金：100像素自动；
}
.马克{
宽度：50px；
高度：2倍；
位置：绝对位置；
最高：50%；
左：50%；
背景：线性渐变（向右，黑色，黑色25%，透明25%，透明75%，黑色75%）；
转换：翻译（-50%，-50%）；
}
维特先生{
宽度：2倍；
高度：50px；
背景：线性梯度（至底部，黑色，黑色25%，透明25%，透明75%，红色75%）；
转换：翻译（-50%，-50%）；
}
.angle-1{
变换：平移（-50%，-50%）旋转（45度）；
}
.angle-2{
变换：平移（-50%，-50%）旋转（-45度）；
}
.内部{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

---

您可以将其包装在一个div中，并为

提供以下样式：

#circle {
    border: solid black 2px;
    border-radius: 50%;
    width: 10em; //Depends on the circles size..
    height: 10em;
}

---

不幸的是，您的问题并不完全清楚，但我猜您希望创建一些关于种子的信息图形，并在一个漂亮的图形周围添加文本

我没有把重点放在展示如何用CSS创建带边框的圆并在它们周围放置文本上，而是从原始图像中删除文本并对其进行裁剪。因为，正如我在评论中建议访问我的答案时所说的那样，对我来说，获取代码和裁剪后的图像并向您展示如何使用Flexbox布局和媒体查询创建响应性信息图形更为合理

如果这不是您的意思，请修改您的答案，并更具体地说明您需要什么。然而，虽然使用CSS创建图形很有趣，但在维护方面，您最好使用裁剪过的图像或SVG文件（更多用于创建自定义图形的图形元素）

片段

有两个演示，展示了如何使用Flexbox布局和自定义属性相结合来创建相应大小的2D XxY网格，其中裁剪的图像位于中心

• 演示1是一个相当简单的3x3 flexbox网格，单元大小相同
• 演示2更复杂，有一个主3x1网格，带有嵌套的1x2、1x3和1x2子网格，比演示1

该片段有大量注释，应该是不言自明的，但另外：

• 我把你原来的

  .outCircle

  放在HTML中，只是把它禁用了
• 裁剪后的图像为138x138px PNG文件（11.4Kb），具有透明背景（alpha通道），因此您可以播放信息图形

  背景色
  （
  ：白色，暂时不播放）

• @media

  将小于720px（W/H）的任何东西视为“智能手机”，既不会显示图像（或

  .outCircle

  ），也不会显示任何网格布局

您所需要做的就是对间距、颜色和字体大小进行微调

确保在SO上打开“整页”，并调整浏览器窗口的大小。

/*************************************/
/*主页结构，手机优先*/
/*************************************/
车身{高度：100vh；背景色：白色}
.主体结构{
显示：柔性；柔性流：列换行；
/*将元素内的所有内容居中（垂直和水平）*/
对齐内容：居中；对齐内容：居中；对齐项目：居中
/*添加您的特定移动设置*/
}
.main结构.outCircle{display:none}/*不在手机上显示*/
.main结构img{display:none}/*同上*/
.main结构ul{padding right:40px}/*[可选]使L/R填充相等*/
/*************/
/*赏心悦目*/
/*************/
[波段*=“标题”]{
背景色：rgba（254190,0,1）；/*蛋黄淡黄色*/
文本对齐：居中
}
.主体结构.标题{
宽度：100%；/*拉伸以填充父对象*/
填充：.25em 1em；/*一些内部间距*/
颜色：矢车菊蓝；
字体大小：1.25em；字体大小：粗体；
}
.外围{
位置：相对；/*为子元素创建新的“堆叠上下文”*/
/*将元素内的所有内容居中（垂直和水平）*/
对齐内容：居中；对齐内容：居中；对齐项目：居中；
}
.内部{
位置：绝对位置；
宽度：1.25雷姆；
高度：1.25雷姆；
边界半径：50%；
背景颜色：浅蓝色；
}
.马克{
位置：绝对；/*直接定位在父级“堆叠上下文”中*/
宽度：3雷姆；高度：0.125雷姆；
/*父元素中的中心元素*/
顶部：50%；左侧：50%；
转换：翻译（-50%，-50%）；
背景：线性渐变（向右，黑色，黑色25%，透明25%，透明75%，黑色75%）；
}
维特先生{
宽度：0.125rem；高度：3rem；
转换：翻译（-50%，-50%）；
背景：线性梯度（至底部，黑色，黑色25%，透明25%，透明75%，红色75%）；
}
.angle-1{变换：平移（-50%，-50%）旋转（45度）}
.angle-2{变换：平移（-50%，-50%）旋转（-45度）}
/*****************************/
/*桌面特定设置*/
/*****************************/
@媒体（最小宽度：720px）和（最小高度：720px）{/*任何比平均移动设备大的东西*/
/*基本flexbox贴片网格结构*/
[patch]，[patch]>*{display:flex；flex-wrap:wrap}/*补丁和单元容器*/
[修补程序]{对齐内容：flex开始；位置：相对}
[补丁]>*{flex-grow:1；/*[必需]*/
溢出：隐藏；/*[可选]*/
/*将元素内的所有内容居中（垂直和水平）*/
辩护骗局