Shulou(Shulou.com)06/01 Report--

This article mainly introduces css3 how to add text shadow effect, the article is very detailed, has a certain reference value, interested friends must read it!

In fact, there is a very useful attribute in css3 that can add shadows to font text, and that is the css3 text-shadow attribute.

So, let's take a detailed look at the text-shadow property:

Text-shadow is a CSS style attribute word, which is a CSS style that sets whether the text font in the object has a shaded and blurred effect.

Text-shadow attribute: in CSS3, you can use the text-shadow attribute to add shadow effects to the text on the page, and you can achieve some desired font shadow effects by setting the relevant property values of the text-shadow property, reducing the use of pictures.

Syntax for the text-shadow attribute:

Text-shadow: h-shadow v-shadow blur color

You can see that the text-shadow property can set four parameters, each separated by a space. Let's introduce these four parameters:

H-shadow: set the position of horizontal shadows (x-axis direction), required parameters; negative values are allowed.

V-shadow: set the position of the vertical shadow (y-axis direction), you must set the parameter, allow negative values.

Blur: the distance (radius size) of the shadow blur, which can be selected as the setting parameter.

Color: the color of the shadow. You can choose the parameters you set.

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

Let's take a look at a small example of css3 setting font text shadows to specifically perceive the use of the text-shadow attribute:

I am a test text.

H2 {

Color:powderblue; / * set text color * /

Text-shadow: 2px 3px 1px pink;/* adds shadows for font text * /

}

1.jpg

Let's take a look at what the css3 text shadow effect looks like if you don't set it:

Description:

1, horizontal offset of the shadow (h-shadow): you 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 on the left side of the object.

2, the vertical offset of the shadow (v-shadow): you can take a positive value or a negative value, if it is a positive value, the shadow is at the bottom of the object, and vice versa, when the value is negative, the shadow is at the top of the object.

3. The blur radius of the shadow can only be set to a positive value. If the value is higher, the shadow is more blurred, and vice versa. If its value is 0, the shadow does not have a blurring effect.

4. Shadow color: when no color value is specified, the browser defaults to the color, but the default color varies from browser to browser. In particular, safari and chrome browsers under the webkit kernel will be colorless, that is, transparent. It is recommended that you do not omit this parameter.

Speaking of different default colors for browsers, let's see if the text-shadow property is supported in each browser:

Browser support:

All major browsers support the text-shadow attribute.

Note: the text-shadow attribute is not supported in Internet Explorer 9 and earlier browsers.

The above is all the contents of the article "how to add text Shadow effects in css3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.