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

Editor to share with you how to use CSS3 to add shadow effects for text and elements, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

With CSS3, you can add shadows to text and elements.

1. Browser support

The numbers in the table specify the first browser version that fully supports this property.

You need to specify a prefix when using-webkit- or-moz- after a number.

Attribute ChromeFirefoxSafariOperaIEtext-shadow4.010.03.54.09.5box-shadow10.0 4-webkit-9.04.0 3. 5-moz-5.1 3. 1-webkit-10.5

2. Text effects of CSS3 Shadow

CSS Code:

Project text shadow effect!

Note: text-shadow attribute is not supported in IE9 and earlier versions.

CSS3 text Shadow

The CSS3 text-shadow property applies shadows to the text.

In simple usage, you can set shadows horizontally (2px) and vertically (2px):

H2 {text-shadow: 2px 2px;}

Add a color to the shadow:

H2 {text-shadow: 2px 2px red;}

Displays a white text with a black shadow:

H2 {color: white; text-shadow: 2px 2px 4px # 0000000;}

The following example shows the shadow of a red neon light:

H2 {text-shadow: 00 3px # FF0000;}

Shadow Complex

To add multiple shadows to the text, you can add a comma-separated list of shadows.

The following example shows a red and blue neon shadow:

H2 {text-shadow: 00 3px # FF0000, 00 5px # F00000;}

The following example shows a white text with black, blue, and dark blue shadows:

H2 {text-shadow: 00 3px # FF0000, 00 5px # 00FF;}

III. Box-shadow attribute

The CSS3 box-shadow attribute applies a shadow to the element.

In the simplest use, specify only horizontal and vertical shadows:

A yellow element uses a black box-shadow

Div {width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px;}

Next, add a color to the shadow and add a blur effect to the shadow:

A yellow element with a blurry red / gray box-shadow.

Div {width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px 5px grey;}

Case

Add shadows to:: before and:: after pseudo classes to create an interesting effect.

Project # boxshadow {position: relative;-moz-box-shadow: 1px 2px 4px rgba (0je 0,0je 0.5);-webkit-box-shadow: 1px 2px 4px rgba (0je 0,0,0.5); box-shadow: 1px 2px 4px rgba (0pr 0,0,0.5); padding: 10px; background: white } / * Make the image fit the box * / # boxshadow img {width: 100%; border: 1px solid # 8a4419; border-style: inset;} # boxshadow::after {content:'; position: absolute; z-index:-1; / * hide shadow behind image * /-webkit-box-shadow: 0 15px 20px rgba (0,0,0,0.3) -moz-box-shadow: 0 15px 20px rgba (0,0,0,0.3); box-shadow: 0 15px 20px rgba (0,0,0,0.3); width: 70%; left: 15%; / * one half of the remaining 30% * / height: 100px; bottom: 0 15px 20px rgba}

# boxshadow {position: relative;-moz-box-shadow: 1px 2px 4px rgba;-webkit-box-shadow: 1px 2px 4px rgba (0,0,0.5); box-shadow: 1px 2px 4px rgba (0,0,0.5); padding: 10px; background: white;} / * Make the image fit the box * / # boxshadow img {width: 100% Border: 1px solid # 8a4419; border-style: inset;} # boxshadow::after {content: & # 039; position: absolute; z-index:-1; / * hide shadow behind image * /-webkit-box-shadow: 0 15px 20px rgba (0,0,0,0.3);-moz-box-shadow: 0 15px 20px rgba (0,0,0,0.3) Box-shadow: 0 15px 20px rgba (0,0,0,0.3); width: 70%; left: 15%; / * one half of the remaining 30% * / height: 100px; bottom: 0There are all the contents of the article "how to use CSS3 to add shadows to text and elements". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.