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

Posted 2023-02-24

【中文标题】您如何设置 HTML 中间点的样式？

【英文标题】：How do you style an HTML middot?

【发布时间】：2017-10-30 09:24:33

【问题描述】：

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

· · ·

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

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

【问题讨论】：

这些中间点有什么特别之处？这与询问如何设置任何其他字符的样式有何不同？

【参考方案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>

【讨论】：

我应该指定我想要围绕白点的蓝色圆形轮廓，而不是方形蓝色边框，但这很好，谢谢！

@AliciaGuerra border-radius: 50%;

应该注意，使用 :first-letter 伪元素选择器的看似显而易见的答案不适用于中点（和其他特殊字符）。