Css 简明教程

CSS - text-shadow Property

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

The text-shadow property is used to add a shadow effect to text. It allows you to specify the color, offset, blur-radius, and spread-radius of the shadow.

Possible Values

  1. <color>: Sets the color of the shadow. It is optional. It can be specified either before or after the offset values. Any value for color can be specified, such as, name, HEX or RGB value.

  2. <offset-x><offset-y>: Any length value, specifying the x and y values. x value represents the shadow’s horizontal distance from text. y value represents the shadow’s vertical distance from text. If x and y values equal 0, the shadow appears behind the text.

  3. <blur-radius> Any length value, specifying the value of blur-radius. It is optional. To make the blur look bigger, you need to provide higher value. If no value is passed, it is taken as 0.

Applies to

所有 HTML 元素。

All the HTML elements.

DOM Syntax

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

  1. The first two (5px,5px) values specify the length of the shadow offset i.e the X-coordinate and the Y-coordinate.

  2. The third value (3px) specifies the blur radius.

  3. The last value (red) describes the color of the shadow.

CSS text-shadow - Simple Shadow Effects

以下是演示如何在文本周围设置阴影的示例。并非所有浏览器都支持此功能 −

Following is the example which demonstrates how to set the shadow around a text. This may not be supported by all the browsers −

<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>