English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
text-The shadow CSS property applies one or more text shadow effects to the text content of an element. Each text shadow effect must specify the shadow offset, and may optionally specify the blur radius and shadow color.
The following table provides usage instructions and version history of this property, as well as the syntax of its usage in JavaScript scripts.
| Default value: | none |
|---|---|
| Applies to: | All elements. It also applies to ::first-letter and ::first-line. |
| Inheritance: | Yes |
| Animatable: | Yes.Please refer to Animation properties. |
| Version: | CSS3new feature |
| JavaScript syntax: | object.style.textShadow="2px 2px #ff0000" |
The text shadow effects are applied in the specified order, so they may overlap each other, but they will never cover the text itself.
The blur radius can be specified after the shadow offset value; it is a length value representing the size of the blur effect.
The color value of the shadow can be specified before or after the offset length value. If no color is specified for the shadow, the CSS color will be used. colorThe value of the attribute.
The syntax of this attribute is as follows:
text-shadow: shadow1 , [shadow2, ... shadowN] | none | inherit where shadow is: [offset-x offset-y blur-radius color]
The following examples demonstrate how to use text-shadow attribute.
h1 {
text-shadow: 2px 2px 5px #000;
}
p {
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}Test to see‹/›Note:If both shadow offset values are set to 0, the shadow will be placed behind the text, and blurring effects may occur when specifying the blur radius.
The following table describes the value of this attribute.
| Value | Description |
|---|---|
| Required -The following values must be specified for the attribute. | |
| h-shadow | The horizontal position of the shadow. Negative values are allowed. |
| v-shadow | The vertical position of the shadow. Negative values are allowed. |
| Optional -The following values are optional. | |
| blur | Specify the blur size. |
| color | Specify the color of the shadow. SeeCSS color valuesto obtain a list of possible color values. |
| inherit | If specified, the associated element uses its parent element text-The values of shadow attribute. |
text-Browser compatibility of shadow attribute, the numbers in the following table represent the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.
|
Warning: Internet Explorer 7and earlier versions do not support value inheritance. IE8Supports inheritance, but requires<!DOCTYPE>.IE9Supports inheritance.
Please refer to the following tutorials:CSS Text.
Properties related to text:letter-spacing,text-align,text-decoration,text-indent,text-overflow,text-transform,white-space,word-spacing.