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

Question

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

cssoutline

3

在数字上创建双重边框(就像下面图片中的绿色和白色边框)是否有可能呢？有什么想法吗？请参考下面的图片：

- Ana DEV

只是为了澄清，您是希望针对正文中的**任何**数字字符进行操作，还是仅限于容器内的数字（div、span等）？ - Lars Kristensen

我需要匹配任何数字和文本字符 @Lars Kristensen。感谢您的澄清。 - Ana DEV

2个回答

3

根据您需要支持的浏览器不同，效果可能会有所不同，但您可以通过文本阴影和-webkit-text-stroke的组合实现类似的效果。

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

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

这里还有另一个（可能更好的）选项，使用::before和自定义数据属性 - 感谢Code Carnivore提供的这个聪明的解决方案。

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

- Brian FitzGerald

没错，我也尝试了这个组合。谢谢@Brian FitzGerald - Ana DEV

从响应的角度来看，当字体大小变小时，所有东西看起来都很丑陋，这对你来说会很困难。 - Ana DEV

是的，我也看到了。我认为你可能需要使用一些额外的类来实现这个...比如.very-small-text-outline .small-text-outline .medium-text-outline .large-text-outline，并根据此调整描边和文本阴影的宽度，然后根据所需的文本大小动态应用这些类。 - Brian FitzGerald

没错。非常感谢您的回答和示例 @Brian FitzGerald - Ana DEV

好的，经过与同事讨论，我使用 ::before 和 自定义数据属性 添加了另一个选项。极限编程总是能产生最好的结果！祝你在实现中好运。 - Brian FitzGerald

是的，@Brian FitzGerald 的解决方案非常好。如果可以的话，我会再次投票支持你的答案！ - Ana DEV

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 3rdthemagical · Accepted Answer

你可以使用text-shadow来玩耍。看起来不太酷，但我认为这是CSS所能做的全部。

在CSSTricks上的原始文章。

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>