html - 在圆圈/圆盘周围放置边框，其中包含带有 css 的文本

Question

使用 CSS，我有一个将文本放置在圆圈/圆盘中的显示。

这是我的例子:

但我很难在圆圈/圆盘周围放置红色边框。

我已经搜索过 SO & Google，查看了大量示例，但我无法将我的 css 类代码配置为具有边框。

希望有人能给出答案。

这是我的 html:

span.circle_standard {
  background: #000;
  border-radius: 3em;
  -moz-border-radius: 3em;
  -webkit-border-radius: 3em;
  color: #fff;
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  line-height: 6em;
  margin-bottom: 2px;
  text-align: center;
  width: 6em;
}

<div class="col-md-4 padding-bottom-10" dir="ltr" style="direction: ltr; background-color: yellow; text-align: center;">
  <div class="row">
    <span class="circle_standard" dir="ltr" style="direction: ltr;">WWWWW</span>
  </div>
  <div class="row">
    <b>Descriptive Details Here</b>
  </div>
</div>

Answer 1

您可以使用 box-shadow property这样做:

span.circle_standard {
  background: #000;
  border-radius: 3em;
  -moz-border-radius: 3em;
  -webkit-border-radius: 3em;
  color: #fff;
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  line-height: 6em;
  margin-bottom: 2px;
  text-align: center;
  width: 6em;
  box-shadow:  0 0 0 4px red;
}

<div class="col-md-4 padding-bottom-10" dir="ltr" style="direction: ltr; background-color: yellow; text-align: center;">
  <div class="row">
    <span class="circle_standard" dir="ltr" style="direction: ltr;">WWWWW</span>
  </div>
  <div class="row">
    <b>Descriptive Details Here</b>
  </div>
</div>