[Learn one CSS3 property a day] Part 2: box-shadow_html/css_WEB-ITnose

I’m busy today and haven’t been able to take a good look at new things. Let’s record a commonly used CSS3 property: box-shadow, which represents shadow. If border-radius rounded corners are set, the shadow will also be rounded.

box-shadow is currently a property supported by IE9 and above and other modern browsers.

Syntax:

Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

Value:

inset: Indicates that the shadow is inside the border (even if there is no border), above the background , under the content;

offset-x and offset-y: offset, positive value means left and downward;

blur-radius: blur radius, default 0, cannot be Negative value;

spread-radius: positive value will expand the shadow, negative value will shrink it, the default is 0.

color: Color, if it is not defined, it will be determined by the browser.