How to add text shadow effect in css3? text-shadow sets the text shadow effect

The shadow effect is a common and very practical effect. I believe that some friends sometimes have some questions when using the shadow effect to make the web page beautiful, such as: how to set the shadow of the font and text, etc. So this chapter will tell you how to set the font text shadow in CSS3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In fact, there is a very practical attribute in css3 that can add a shadow effect to font text, that is css3 text-shadow attribute.

So, let’s take a detailed look at the text-shadow attribute first:

Text-shadow is a CSS style attribute word, which is used to set whether the text font of the text in the object has a shadow and blur effect. CSS styles.

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 required font shadow effects by setting relevant attribute values ​​​​to the text-shadow attribute. ,Reduce the use of pictures.

The syntax of the text-shadow attribute:

text-shadow: h-shadow v-shadow blur color;

It can be seen that the text-shadow attribute can set 4 parameters. Each parameter is separated by spaces. Let’s introduce these four parameters. ：

h-shadow: Set the position of the horizontal shadow (x-axis direction), a required parameter; negative values ​​are allowed.
v-shadow: Set the position of the vertical shadow (y-axis direction), required parameters, negative values ​​allowed.
blur: The distance (radius size) of shadow blur, you can choose to set the parameters.
color: The color of the shadow, optional parameters to set.

Note: The text-shadow property can add one or more shadows to text. This property is a comma-separated list of shades, each shade specified with two or three length values ​​and an optional color value. The omitted length is 0.

Let’s take a look at a small example of css3 setting font text shadow to get a concrete understanding of the usage of the text-shadow attribute:

<h1 id="我是一段测试文字">我是一段测试文字</h1>

h1{
   color:powderblue; /*设置文字颜色*/
   text-shadow: 2px 3px 1px pink;/*添加字体文字的阴影*/
}

Rendering:

Let’s take a look at what will happen if the css3 text shadow effect is not set:

Description:

1. The horizontal offset of the shadow (h-shadow): it can take a positive value or a negative value. If the value is positive, the shadow is on the right side of the object, and vice versa. When the value is negative, the shadow is to the left of the object.

2. The vertical offset of the shadow (v-shadow): It can take a positive value or a negative value. If it is a positive value, the shadow is at the bottom of the object. Otherwise, when the value is a negative value, the shadow on top of the object.

3. Shadow blur radius: can only be set to positive values. If the value is larger, the shadow will be blurry, otherwise the shadow will be clearer. If its value is 0, it means that the shadow has no blur effect.

4. Shadow color: When no color value is specified, the browser will use the default color, but the default color of each browser is different, especially Safari and Chrome browsers under the webkit kernel will not Color, that is, transparency, it is recommended not to omit this parameter.

Speaking of the different default colors of browsers, let’s take a look at whether the text-shadow attribute is supported in various browsers:

Browser support:

All major browsers support the text-shadow attribute.

Note: Internet Explorer 9 and earlier browsers do not support the text-shadow attribute.

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