你如何设计HTML middot？

Question

所以,在我的HTML中,我正在放置3个middots(垂直居中的点)

· · ·

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

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

Answer 1

为了使它们更大,只需font-size结合使用该属性即可line-height.要仅设置第一个点的样式,您需要将其包装成a <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>