带有阴影效果的 HTML5 文本

Posted 2023-03-06

技术标签:

【中文标题】带有阴影效果的 HTML5 文本【英文标题】：HTML5 Text with shadow effect 【发布时间】：2018-02-12 13:58:53 【问题描述】：

我一直在做前端开发，但无法实现带有阴影效果的文本。前端由 html5、CSS3、bootstrap 和 AngularJS 编码，所以在设计中，在文本文件处有阴影效果，就像 Photoshop 中的阴影效果一样。

请告诉我如何实现这种阴影效果。

【问题讨论】：

您尝试过任何研究吗？ google html5 text with shadow effect 提供了惊人数量的有用结果 【参考方案1】：

你可以使用'text-shadow'属性。

阅读有关文本阴影属性的更多信息：Text Shadow

在本例中，它将影响 h1 元素。

h1 
    text-shadow: 2px 2px #ff0000;

语法：

text-shadow: h-shadow v-shadow blur-radius color;

【讨论】：

【参考方案2】：

注意： Internet Explorer 9 及更早版本不支持 text-shadow 属性。

并且应该在提出任何问题之前搜索谷歌。因为在这个我的答案是谷歌搜索的第一个结果。

<!DOCTYPE html>
<html>
<head>
<style>
h1 
    text-shadow: 3px 3px #FF1111;

</style>
</head>
<body>

<h1>Some Text</h1>
</body>
</html>

【讨论】：

您是否使用问题中的确切标题进行搜索：p @JaromandaX 。是的，伙计。这就是我在回答中提到的原因。我知道，但问题的 exact 标题 - 表明 OP 付出了零努力，但你仍然回答了：p

以上是关于带有阴影效果的 HTML5 文本的主要内容，如果未能解决你的问题，请参考以下文章