您如何设置 HTML 中间点的样式？

Question

所以，在我的 HTML 中，我放置了 3 个中点（垂直居中的点）

· · ·

我想给它们设置样式。我想让它们更大。我还想将第一个点设为白色并在其周围放置一个蓝色圆形轮廓，同时将其他两个点设为灰色。

知道这是否可行，如果可以，该怎么做？

Answer 1

要使它们更大，只需将font-size 属性与line-height 结合使用。要仅设置第一个点的样式，您需要将其包装成 <span> 并单独设置样式。蓝色边框可以通过text-shadow属性实现：

div {
  font-size: 5em;
  line-height: .4em;
  color: gray;
}

div>span {
  text-shadow: 0px 0px 4px blue;
  color: white;
}

<div><span>·</span>··</div>

如果您在 4 个不同方向上使用 4 个文本阴影，您甚至可以使轮廓更粗：

text-shadow:
  -1px -1px 0 blue,
  1px -1px 0 blue,
  -1px 1px 0 blue,
  1px 1px 0 blue;

div {
  font-size: 5em;
  line-height: .4em;
  color: gray;
}

div>span {
  text-shadow: -1px -1px 0 blue, 1px -1px 0 blue, -1px 1px 0 blue, 1px 1px 0 blue;
  color: white;
}

<div><span>·</span>··</div>