围绕圆圈/圆盘放置边框，用css保存文本

Question

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

以下是我的例子：

但我正在努力在圆圈/圆盘周围放置一个红色边框。

我搜索了SO＆amp;谷歌，看了很多例子，但我无法配置我的css类代码有边框。

希望有人能提出答案。

这是我的HTML：

public class ClassA {

    private Main main;
    Object obj = new Object;

    public void setMain(Main main) {
        this.main = main;
    }
    methodA() {  //called first
        obj.someFunction();
        main.someFunction();
    }
    methodB() {  //called second
        obj.someOtherFunction();
    }
}

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;
}

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>

Answer 2

.circle {
  width:200px;
  height:200px;
  border-radius:100px;
  font-size:20px;
  color:#fff;
  text-align:center;
  background:#000;
  border-style: solid;
  border-width: 8px;
  border-color: #6CB670;
}

<div class="circle"></div>

签入jsfiddle。