轮廓文本阴影（outlined text shadow with fallback）

更多有趣示例 尽在知屋安砖社区

示例

HTML

<h1>知屋安砖</h1> 

CSS

body {
  font-family: system-ui, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

h1 {
  font-size: calc( 1em + 30vmin );
  font-weight: 900;
  color: tomato;
  
  --x-offset: -0.0625em;
  --y-offset: 0.0625em;
  --stroke: 0.025em;
  --background-color: white;
  --stroke-color: lightblue;
  
  text-shadow: 
    
    var(--x-offset)
    var(--y-offset)
    0px
    var(--background-color), 
    
    calc( var(--x-offset) - var(--stroke) )
    calc( var(--y-offset) + var(--stroke) )
    0px
    var(--stroke-color);
  
}
/* for browsers that support spread, added in
https://drafts.csswg.org/css-text-decor-4/#text-shadow-property
currently: none browsers! none of them!
I can't even find a test: 
https://wpt.fyi/results/css/css-text-decor */
@supports ( text-shadow: 1px 1px 1px 1px black ) {
  h1 {
    text-shadow:
      
      var(--x-offset)
      var(--y-offset)
      0px
      0px
      var(--background-color), 
      
      var(--x-offset) 
      var(--y-offset)
      var(--stroke)
      0px
      var(--stroke-color);
    
  }
}