笙亿网络策划

CSS text-shadow 怎么用？文本阴影效果如何实现？

约 3 分钟读完 4 阅
文章导读
上一个 测验 下一个 text-shadow 属性用于为文本添加阴影效果。它允许您指定阴影的颜色、偏移量、模糊半径和扩展半径。
📋 目录
  1. A 可能的值
  2. B 适用于
  3. C DOM 语法
  4. D CSS text-shadow - 简单阴影效果
A A

CSS - text-shadow 属性

上一个
测验
下一个

text-shadow 属性用于为文本添加阴影效果。它允许您指定阴影的颜色、偏移量、模糊半径和扩展半径。

可能的值

  • <color>:

    • 设置阴影的颜色。

    • 它是可选的。

    • 可以在偏移值之前或之后指定。

    • 可以指定任何颜色值，例如名称、HEX 或 RGB 值。

  • <offset-x><offset-y>:

    • 任何长度值，指定 x 和 y 值。

    • x 值表示阴影相对于文本的水平距离。

    • y 值表示阴影相对于文本的垂直距离。

    • 如果 x 和 y 值均为 0，则阴影出现在文本后面。

  • <blur-radius>

    • 任何长度值，指定模糊半径的值。

    • 它是可选的。

    • 要使模糊效果更大，需要提供更高的值。

    • 如果未提供值，则默认为 0。

适用于

所有 HTML 元素。

DOM 语法

object.style.textShadow = "5px 5px 3px red";

  • 前两个值 (5px,5px) 指定阴影偏移的长度，即 X 坐标和 Y 坐标。

  • 第三个值 (3px) 指定模糊半径。

  • 最后一个值 (red) 描述阴影的颜色。

CSS text-shadow - 简单阴影效果

以下示例演示了如何为文本设置阴影。此功能可能不被所有浏览器支持 −

<html>
<head>
</head>
<body>
   <h2>Text Shadow</h2>
      <p style="text-shadow: 5px 5px 3px yellow;">Text shadow</p>
      <p style="text-shadow: 10px 5px #00ffff;">Text shadow</p>
      <p style="text-shadow: blue 0px 0px 2px">Text shadow</p>
      <p style="text-shadow: rgb(26, 69, 105) 0px 0px 10px">Text shadow</p>
</body>
</html>