html中text shadow,CSS text-shadow

CSS text-shadow

Run

Stack editor

Unstack editor

Example

h1 {

font-family: sans-serif;

color: white;

text-shadow:

1px 1px 8px black,

.5em -.5em 0 gold,

1em .4em 0 orange,

1.5em .4em 10vw orange,

0 0 10vw gold;

font-size: 10vw;

}

CSS Shadows

The CSS text-shadow property is used for applying shadow effects to text.

You can use text-shadow to apply drop-shadows, outer glows, and other shadow effects to text.

The text-shadow property accepts a list of values. Each item in the list can have either two, three, or four values.

The first two values are length values that define the shadow's horizontal offset and vertical offset respectively (these are required values). A third length value can be used define the shadow's blur radius (optional). And a color value can be used to define the shadow's color (optional).

You can apply multiple shadow effects within a single text-shadow declaration by separating each set of values with a comma. Multiple shadow effects are applied in the order specified and may thus overlay each other, but they will never overlay the text itself.

Text shadows are not clipped to the shadowed shape and may show through if the text is partially-transparent. Also, text shadows do not influence layout, and do not trigger scrolling or increase the size of the scrollable area.

Syntax

text-shadow: none | [ {2,3} && ? ]#

These values are explained below.

Possible Values

none

No shadow.

The first length value specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.

The second length value specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.

The third length value specifies the blur radius. Larger values result in a more blurred shadow. A value of 0 results in a sharp shadow. Negative values are not allowed.

This value specifies the color of the shadow. If this value is not specified, the shadow has the resulting color of the ink that it shadows.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial

Represents the value specified as the property's initial value.

inherit

Represents the computed value of the property on the element's parent.

unset

This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value

none

Applies To

All elements

Inherited?

Yes

Media

Visual

Animatable

Example Code

/* A single shadow */

h1 {

text-shadow: 4px 4px 8px blue;

}

/* Multiple shadows */

h1 {

text-shadow: 4px 4px 8px blue, 8px -4px 8px orange;

}

/* Shadow without specifying the color. This will use the text color. */

h1 {

text-shadow: 4px 4px 8px;

}

/* Shadow without specifying a blur radius or color. */

h1 {

text-shadow: 4px 4px;

}

Official Specifications

The text-shadow property was introduced in CSS2, dropped from CSS2.1, then subsequently reintroduced in CSS3 (under the CSS Text Decoration Module Level 3).

CSS Text Decoration Module Level 3 (W3C Candidate Recommendation 1 August 2013)

CSS Level 2 (W3C Recommendation 12-May-1998)