在文本后面制作圆形边框 - 不在周围答案

【问题标题】：Making a circular border, behind text - not around在文本后面制作圆形边框 - 不在周围
【发布时间】：2018-10-08 21:33:58
【问题描述】：

我会尝试使用我以前见过的东西并用 html/css 重新创建它。这是我在 Word 中制作的模型。

我发现的几乎所有内容都是关于inside 圆圈的文字，而不是后面的重音，就像这张图。我想让圆圈和文本尽可能居中。

这是我最好的尝试：https://jsfiddle.net/FNdXz/559/

#container
{
  height:400px;
  width:400px;
  background-color: #ccc;
  display: table-cell;
}

#inner
{
  height:200px;
  width:200px;
  background:transparent;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  margin-left:25%;
  margin-top:25%;
  border: 1px solid white;
}

#test {
  color: black;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
}

#sub-test {
  color: blue;
  text-align: center;
  font-size: 30px;
}

<div id="container">
    <div id="test">
      Hello World
    </div>
    <div id="sub-test">
      Test, this is only a test
    </div>
    <div id="inner">
    </div>
</div>

显然，我稍后会担心字体和颜色 - 但我真的在定位问题上苦苦挣扎，可以寻求专业人士的帮助。

【问题讨论】：

你看过这个（stackoverflow.com/a/27587340/5074998）吗？它似乎有效。

标签： html css

【解决方案1】：

您需要使用position 和z-index 设置。将position 设置为absolute，您可以从父容器的top、right、bottom 和left 侧定义边距。 z-index 确定要出现在哪个“层”上 - 值越高，它获得的优先级越高。请参阅更新后的 CSS here。

#container
{
  height:400px;
  width:400px;
  background-color: #ccc;
  display: table-cell;
  position: relative;
}

#inner
{
  height:200px;
  width:200px;
  position: absolute;
  top: -2%;
  left: -2%;
  z-index: 1;
  background:transparent;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  margin-left:25%;
  margin-top:25%;
  border: 1px solid white;
}

#test {
  position: absolute;
  color: black;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
  top: 30%;
  left: 15%;
  z-index: 2;
}

#sub-test {
  position: absolute;
  top: 45%;
  left: 15%;
  z-index: 2;
  color: blue;
  text-align: center;
  font-size: 30px;
}

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container
{
  height:400px;
  width:400px;
  background-color: #ccc;
  display: table-cell;
}

#inner
{
  height:200px;
  width:200px;
  background:transparent;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  margin-left:25%;
  margin-top:10%;
  border: 1px solid white;
  position : relative;
}

#test {
  color: black;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
  position : absolute;
  margin-top : 100px;
  margin-left : 70px;

}

#sub-test {
  color: blue;
  text-align: center;
  font-size: 30px;
  position : absolute;
  margin-top : 160px;
  margin-left : 50px;
}
</style>
</head>
<body>
<div id="container">

    <div id="test">
      Hello World
    </div>
    <div id="sub-test">
      Test, this is only a test
    </div>
    <div id="inner">
    </div>
</div>
<body>
</html>

希望这是您的要求

【讨论】：

谢谢@suren！

【解决方案3】：

用svg 创建一个圈子很简单。您可以使用 flexbox 将容器中的所有内容居中。

然后使用position: absolute 和较低的z-index 将svg 在文本后面居中。

#container {
  height: 400px;
  width: 400px;
  background-color: #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#container>div {
  z-index: 1;
}

#test {
  color: black;
  font-size: 50px;
}

#sub-test {
  color: blue;
  font-size: 30px;
}

svg {
  position: absolute;
  z-index: 0;
}

<div id="container">
  <div id="test">
    Hello World
  </div>
  <div id="sub-test">
    Test, this is only a test
  </div>
  <svg height="200" width="200">
  <circle cx="100" cy="100" r="100" stroke="white" stroke-width="1" fill="transparent"/>
</svg>
</div>

【讨论】：

【解决方案4】：

另一个想法是简单地使用径向渐变：

#container {
  padding:50px 0;
  width: 400px;
  background:radial-gradient(circle at center,transparent 40%,#fff 40%,#fff calc(40% + 1px),transparent calc(40% + 1px)),
  #ccc;
  display: table-cell;
}

#test {
  color: black;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
}

#sub-test {
  color: blue;
  text-align: center;
  font-size: 30px;
}

<div id="container">
  <div id="test">
    Hello World
  </div>
  <div id="sub-test">
    Test, this is only a test
  </div>
</div>

【讨论】：