html - CSS - 将文本阴影与文本轮廓结合起来？

<分区>

我正在尝试完成这个(不要介意红色背景)

这就是我得到的结果我可以在文本周围设置边框，但是我无法将它与文本阴影结合起来...我该如何解决这个问题？也许是 :before :after 语句？

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    
    
    

    /*
    text-shadow: 0 0 5px #000000; 
    
    THIS WILL GIVE THE TEXT THE SHADOW*/
    
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    /*THIS WILL GIVE THE TEXT THE BORDER*/
    
    /*How can I combine these two?*/
}

<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

最佳答案

也许这个解决方案就是您正在寻找的:

h1 {
   -webkit-text-stroke: 1px black;
   color: white;
   text-shadow:
     3px 3px 5px #000,
     -1px -1px 5px #000,  
     1px -1px 5px #000,
     -1px 1px 5px #000,
      1px 1px 5px #000;
}

<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

关于html - CSS - 将文本阴影与文本轮廓结合起来？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47883791/

上一篇：html - PDF 作为 HTML 中的空白页

下一篇：html - 增加 App Store 徽章的边距以匹配 Google Play 商店徽章的大小

相关文章：

html - 多次尝试后网站上的菜单栏未居中

html - Bootstrap 网格系统 - 根据大小使列更改行

html - <ul> 菜单不会居中

html - CSS:多行文本上的透明背景色，没有难看的重叠或行间空格

html - 无法理解 CSS Sticky Footer!

android cardview 显示卡周围的边框

css - 你如何复制这个盒子阴影效果？

html - 我怎样才能 "clear"flexbox 元素？

javascript - 在不可视化的情况下删除数据中的空间

css - 如何摆脱 css 选项卡标签中的底部阴影