Shadow box-shadow, box-shadow

Source: Internet
Author: User

Shadow box-shadow, box-shadow

Box-shadow: None | <shadow> [, <shadow>] *

<Shadow>= Inset? & <Length> {2, 4} & <color>?

Default Value: None

Applicable: All elements

Inheritance: None

Animation: Yes, except for internal and external shadow Switching

Calculated value: Specified value

Valid value:

None: no shadow
<Length> ①: 1st length values are used to set the object shadow. Horizontal offset value. It can be a negative value.
<Length> ②: 2nd length values are used to set the object shadow. Vertical Offset Value. It can be a negative value.
<Length> ③: If 3rd length values are provided Shadow blur Value. Negative value not allowed
<Length> ④: If 4th length values are provided, it is used to set the shadow extension value of the object. It can be a negative value.
<Color>: Set the color of the Object Shadow.
Inset: Set the object shadow type to inner shadow. If this value is null, the object's shadow type is external shadow.

Sets or retrieves object shadows.See <'text-shadow'> Properties

  • You can set multiple sets of effects. Each set of parameter values is separated by commas.
  • Corresponding script features:BoxShadow.




<! DOCTYPE html> 


The shadow size is the shadow border added to the original DIV of 200px * 300px after the horizontal offset..



Believe it? Set the horizontal offset to 0 PX.

.sample{    width: 200px;    height: 300px;    background-color: #f1f1f1;    box-shadow: 0px 0px 0px 50px blue;    margin: 200px;}


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.