如何在圆形内部绘制圆形描边？解决描边外溢问题

嘿，我完全懂你的困扰——想给圆形加内部白色描边，结果默认的边框跑到外面去了对吧？别担心，这是因为CSS的border属性默认是在元素的外部边缘绘制的，咱们换两种常用的思路就能轻松实现内部描边效果：

方法一：用box-shadow的inset关键字（最简单） #

这是最快捷的方式，利用内部阴影来模拟描边，不会改变元素的整体尺寸：

.inner-stroke-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #2d3748; /* 圆形的主体底色 */
  /* inset 关键字表示阴影在元素内部绘制，最后三个值分别是模糊度、扩散度、颜色 */
  box-shadow: inset 0 0 0 6px white;
}

• 调整最后一个长度值（示例里的6px）就能改变描边的粗细
• 这种方式不会影响元素的布局尺寸，很适合响应式场景

方法二：用伪元素模拟（更灵活） #

如果需要对描边做更复杂的控制（比如多层描边、渐变描边），伪元素是个不错的选择：

.inner-stroke-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 6px solid white; /* 先设置外层白色边框 */
  position: relative;
}

.inner-stroke-circle::before {
  content: "";
  position: absolute;
  inset: 0; /* 等同于 top:0; right:0; bottom:0; left:0; */
  border-radius: 50%;
  background-color: #2d3748; /* 和主体底色一致 */
  margin: 6px; /* 数值和边框宽度一致，让底色向内收缩，露出内部的白色边框 */
  pointer-events: none; /* 避免伪元素遮挡内部的交互事件 */
}

这个思路相当于用一个同底色的内层圆形，把外层边框的中间部分盖住，只留下边框在圆形内部显示，效果很稳定。

小提示 #

• 如果你的圆形是用padding或者width/height计算尺寸的，记得调整对应数值避免布局偏移
• 两种方法都可以根据需求替换描边颜色（比如换成渐变的话，box-shadow可以用inset 0 0 0 6px linear-gradient(...)）

内容的提问来源于stack exchange，提问作者M.Ali