Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge about whether css3 has a shadow effect. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Css3 has shadow effect; respectively: 1, text shadow effect, the use of "text-shadow" attribute, syntax "text-shadow: horizontal vertical..."; 2, shadow box effect, the use of "box-shadow" attribute, syntax "box-shadow: horizontal vertical...".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

Does css3 have a shadow effect?

1. The "text-shadow" attribute represents the text shadow.

The syntax is

Text-shadow: horizontal shadows vertical shadows blur color

The text-shadow property connects one or more shaded text. Property is a shadow, and every 2 or 3 specified length values and an optional color value are separated by a comma. The length of the spent period is 0.

Examples are as follows:

123 h2 {text-shadow:2px 2px # FF0000;} Text-shadow effect

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

Output result:

2. "box-shadow" stands for box shadow

The syntax is

Box-shadow: horizontal Shadow Vertical Shadow Blur distance

The boxShadow property adds one or more drop-down shadows to the box. This attribute is a comma-separated list of shadows, each specified by 2-4 length values, an optional color value, and an optional inset keyword. The value for omitting length is 0.

Examples are as follows:

123 div {width:300px;height:100px;background-color:yellow;box-shadow: 10px 10px 5px # 888888;}

Output result:

These are all the contents of the article "does css3 have a Shadow effect". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.