时间戳

首页 > 解决方案 > 如何通过CSS设置两层文字的外边框？

html - 如何通过CSS设置两层文字的外边框？

问题描述

我遇到了一个需要使用 CSS 来设计这样一个字体的项目！但我真的无法实现它。如何制作文本外有白色边框，白色边框外有黑色文本的字体。在这里想问一下有没有设计过类似字体的可以帮帮我吗？谢谢大家的帮助

body{
  background-color:yellow;
}
.demo{
  font-size: 100px;
  font-weight: 900;
  -webkit-text-stroke: 6px #fff;
}
<p class="demo">9999</p>

在此处输入图像描述

标签： htmlcss

解决方案

一些过滤器可以近似此：

body{
  background-color:yellow;
}
.demo{
  font-size: 100px;
  font-weight: 900;
  text-align:center;
  padding:10px 0;
  margin:0;
  font-family:monospace;
  filter:
    /* white shadow */
    drop-shadow(0px 0px 4px #fff) drop-shadow(0px 0px 4px #fff) drop-shadow(0px 0px 4px #fff) drop-shadow(0px 0px 4px #fff) drop-shadow(0px 0px 4px #fff) 
    /* then black shadow */
    drop-shadow(0px 0px 0px #000) drop-shadow(0px 0px 0px #000) drop-shadow(0px 0px 0px #000) 
    /* some contrast to limit the blur effect*/
    contrast(8)
}
<p class="demo">9999</p>

推荐阅读