An example of Box-shadow outer Shadow and outer glow in CSS3

Source: Internet
Author: User

Basic notes:

outer shadow:box-shadow:x axis y-axis Rpx color;

Property Descriptions (in order): Shadow's X-axis (negative values can be used) Shadow's y-axis (negative values can be used) shadow blur value (size) Shade color

inner Shadow:box-shadow:x axis y-axis Rpx color inset;

The default is an outer shadow inner shadow: Inset can be set to an inner shadow

Note (PS): This property is used for box models such as (P,P,H1,H2,H3,H4,H5,H6, etc.) is not used to set the text shadow if you set the text shadow refer to Knowledge Points: Text-shadow(same)

Because it is a new attribute, in order to be compatible with the major browsers and support the lower versions of these master browsers, we need to write the name of the property in-webkit-box-shadow form when using the Box-shadow attribute on the main browser. The Firefox browser needs to be written in-moz-box-shadow form.

Open Gate Browser-o-box-shadow Ie>9-ms-box-shadow

Basic exercises:

In order to better understand the characteristics of Box-shadow, do a few small tests: (in order to facilitate directly in the tag nested style)

Test 1:

<p style= "box-shadow:0 0 10px #f00; border:1px solid Green "></p>  box-shadow:0 0 10px #f00

(because it does not make its x-axis and y-axis move the set value will occur in itself radius range, color)

Test 2:

<p style= "box-shadow:4px 4px 10px #f00; border:1px solid Green "></p> box-shadow:4px 4px 10px #f00;

With test 1 different x-axis and y-axis changed positive values (positive value right down) so it became

Test 3:

<p style= "box-shadow:-4px-4px 10px #f00; border:1px solid Green "></p> box-shadow:-4px-4px 10px #f00;

Unlike Test 2, the x-axis and y-axis are changed to negative values (negative values to the left upwards) so this becomes

Similarly: You can test the next positive value, a negative effect, here do not test ...

Test 4:

<p  style= "box-shadow:-10px 0px 10px red,   /* Left Shadow */0px-10px 10px #000,  /* Top Shadow */10px 0px 10px green,  / * Right Shadow */0px 10px 10px blue; */Bottom Shadow */></p>

You see this kind of code will feel messy, but after you see it, you'll understand how it's done. The x-axis and y-axis position and color value and shadow value, (separated by commas) practice a few more times.

Test 5:-- inner Shadow

<p style= "box-shadow:0px 0px 10px red inset; border:1px solid Green "></p> box-shadow:0px 0px 10px red inset;

< Span style= "font-size:15px" > < Span style= "font-size:15px" > /span> The same as the one above is the addition of a inset other properties are the same as the outer shadow

Hundred change not from its pope, practice can be familiar with, understand the principle, arbitrary rewrite, in conjunction with CSS3 animation effect, flash layer (word) are very simple to achieve. Hope to be of help to you.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.