可以用 css 为数字创建双轮廓吗？

Question

是否可以为您在下图中看到的数字创建双轮廓（我的意思是绿色和白色轮廓）

有什么想法吗？

Answer 1

你可以玩玩文字阴影。看起来不太酷，但我认为这是您可以用 css.

做的全部

CSSTricks 上的原创 article。

body {
  background-color: green;
}

span {
  font-size: 70px;
  font-family: Arial;
  font-weight: bold;
  color: block;
  
  text-shadow:
     -2px -2px 0 green,  
      2px -2px 0 green,
      -2px 2px 0 green,
       2px 2px 0 green,
     -3px -3px 0 white,  
      3px -3px 0 white,
      -3px 3px 0 white,
       3px 3px 0 white;
}

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>A</span>
<span>B</span>

Answer 2

根据您需要支持的浏览器，效果并不完全相同，但您可以通过结合使用 text-shadow 和 -webkit-text-stroke 来实现类似的效果。

   text-shadow: 4px 4px 0 green;
  -webkit-text-stroke: 2px white;

https://jsfiddle.net/agentfitz/rs27av43/4/

这是使用 ::before 和 custom data attributes 的另一个（也许更好）选项 - Code Carnivore 的道具，用于此智能解决方案）

https://jsfiddle.net/0wn2ok4g/2/

可以用 css 为数字创建双轮廓吗？

Possible to create a double outline for number with css?

css

outline