你如何设计 HTML middot？

Question

因此，在我的 HTML 中，我放置了 3 个中间点（垂直居中的点）

&middot; &middot; &middot;

我想为它们设计风格。我想让它们变大。我还想将第一个点设为白色，并在其周围画一个蓝色的圆形轮廓，同时将其他两个点设为灰色。

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

Answer 1

要使它们变大，只需使用 font-size property in combination with line-height. To only style the first dot, you need to wrap it into a <span> and style it separately. The blue border can be achieved by using the 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>

你如何设计 HTML middot？

How do you style an HTML middot?

html

css

text

symbols