How to set text shadow in css3? How to set text shadow using text-shadow in css3

There are many properties in css3 that are very convenient and concise to use. Therefore, today’s article will introduce to you the text-shadow property in css3. This property can add shadow to the font. By adding shadow to the text The -shadow attribute sets related attribute values. Let's take a look at the specific content of setting text shadow using text-shadow in css3.

First, let’s take a closer look at the text-shadow property.

text-shadow attribute: In CSS3, you can use the text-shadow attribute to add a shadow effect to the text on the page. You can achieve some desired effects by setting relevant attribute values ​​​​to the text-shadow attribute. Font shadow effect reduces the use of pictures.

How to use the text-shadow attribute: text-shadow: X axis Y axis Rpx color;

Property description (corresponding order): Shadow Value) The Y-axis of the shadow (negative values ​​can be used) The shadow blur value (radius size) The color of the shadow.

Next let’s take a look at a small example of css3 setting text shadow:

<h1 id="PHP中文网文字阴影">PHP中文网文字阴影</h1>

h1{
    text-shadow: 2px 3px 1px pink;
     color:blue;
}

css3 setting text shadow effect is as follows:

Explanation:

1) Displacement distance: Among the parameters used by text-shadow, the first two parameters are the horizontal and vertical displacement of the shadow away from the text. Distance, these two parameters must be specified when using;

2) Shadow blur radius: The third parameter of the text-shadow attribute is the shadow blur radius, which represents the blur range when the shadow blurs outward;

3) Shadow color: The fourth parameter of the text-shadow attribute is the color used when drawing the shadow. It can be placed before or after the three parameters. When no color value is specified, the text's color value is used.

The above is the detailed content of How to set text shadow in css3? How to set text shadow using text-shadow in css3. For more information, please follow other related articles on the PHP Chinese website!