你如何设计HTML middot？

Question

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

· · ·

我想要他们的风格。我想让它们更大。我还想让第一个点变成白色并在其周围加上蓝色圆形轮廓，同时使另外两个点变灰。

任何想法是否有可能，如果是，如何去做？

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>&middot;</span>&middot;&middot;</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>&middot;</span>&middot;&middot;</div>