RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/box-shadow below:

box-shadow · WebPlatform Docs

box-shadow Summary

The box-shadow property programmatically creates one or more shadows on the inside or outside of a block level element.

Overview table

Initial value: none
Applies to: All elements
Inherited: No
Media: visual
Computed value: any length made absolute; any specified color computed; otherwise as specified
Animatable: Yes
CSS Object Model Property: boxShadow
Percentages: n/a

Syntax

box-shadow: blur-radius (optional)
box-shadow: inset (optional)
box-shadow: offset-x (optional)
box-shadow: offset-x offset-y blur-radius color, offset-x offset-y blur-radius color
box-shadow: offset-y (optional)
box-shadow: spread-distance (optional)

Values

inset (optional): If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.
offset-x (optional): The first length is the horizontal offset of the shadow — offset-x specifies the horizontal offset of the shadow, which can be a number of any length unit. Positive values place the shadow to the right of the element, and negative values to the left. If both offset-x and offset-y values are 0, the shadow is placed directly behind the element.
offset-y (optional): The second length is the vertical offset of the shadow — offset-y specifies the vertical offset of the shadow, which can be a number of any length unit. Positive values place the shadow below the element, and negative values above. If both offset-x and offset-y values are 0, the shadow is placed directly behind the element.
blur-radius (optional): The third length is a blur radius, which can be a number of any length unit. The larger this value, the bigger the blur, meaning the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it defaults to 0 (the shadow’s edge is sharp).
spread-distance (optional): The fourth length is a spread distance, which again can be a number of any unit. Positive values cause the shadow to expand and grow bigger, negative values cause the shadow to shrink. If not specified, it defaults to 0 (the shadow is the same size as the element). Note that setting the size of an outer shadow to 0 causes it to disappear, whereas a 0-sized inner shadow covers the entire padding-box. For inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow’s perimeter shape.
offset-x offset-y blur-radius color, offset-x offset-y blur-radius color: To apply multiple shadows to one element, write the box-shadow values out one after another, separated by commas.

Examples

An example of a basic drop shadow. An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only: it is clipped inside the border-box of the element.

article {

   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

View live example

An example of inner drop shadows. An inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The inner shadow is drawn inside the padding edge only: it is clipped outside the padding box of the element.

article {

   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
}

View live example

An example of how a positive spread distance length value affects the drop shadow. If a spread distance is defined, the shadow is expanded outward or contracted inward.

article {

   box-shadow: 0 0 5px 10px rgba(0, 0, 0, 0.5);
}

View live example

Negative values cause the shadow shape to contract.

article {

   box-shadow: 0 20px 5px -10px rgba(0, 0, 0, 0.5);
}

View live example

If the blur value is zero, the shadow’s edge is sharp. (A non-zero blur value indicates the resulting shadow should be blurred, such as by a Gaussian filter.)

article {

   box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5);
}

View live example

If the box has a nonzero ‘border-radius’, the shadow shape is rounded in the same way. (The ‘border-image’ does not affect the shape of the box-shadow.)

article {

   box-shadow: 0 0 10px rgba(0, 0, 0, 1);
   border-radius: 10px;
}

View live example

An example of a multiple box-shadows. The inner shadow appears on all four sides by creating two box-shadows.

<style>
    .shadow-style {
        width: 100px;
        height: 100px;
        box-shadow: inset 30px 30px 5px green, inset -30px -30px 5px blue;
        border: 10px solid yellow;
        background-color: red;
    }
</style>
<body>
    <div class="shadow-style">
    </div>
</body>

View live example

Usage

 ===Remarks===