Best IT Recipes

Add CSS window shadow around the whole DIV

Is it possible for a shadow to surround the entire DIV?

-moz-box-shadow: 3px 3px 3px #ccc; -webkit-box-shadow: 3px 3px 3px #ccc; box-shadow: 3px 3px 3px #ccc;

I know the order of the attributes:

  • Horizontal displacement
  • Vertical displacement
  • Blur radius
  • Color

But I wonder if it is possible to make a shadow go around it, and not appear only on one edge or side.

+61
css css3
Jul 25 '11 at 19:33
source share
6 answers

You shift the shadow, so that it evenly surrounds the frame, do not move it:

 -moz-box-shadow: 0 0 3px #ccc; -webkit-box-shadow: 0 0 3px #ccc; box-shadow: 0 0 3px #ccc;
+121
Jul 25 '11 at 19:35
source share

Yes, do not pan vertically or horizontally and use a relatively large blur radius: fiddle

In addition, you can use multiple shadow shadows if you separate them with a comma. This will allow you to fine-tune where they blur and how much they expand. The example I provide is indistinguishable from a large outline , but it can be customized much more: fiddle

You missed the last and most relevant box-shadow property, which is spread-distance . You can specify the value of how much the shadow expands or contracts (makes my second example obsolete): fiddle

Full list of properties:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread distance] [color] insert?

But better yet, read the spec .

+18
Jul 25 '11 at 19:37
source share

Just use the code below. It will obscure the whole div

-webkit-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); -moz-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);

Hope it works

+7
Feb 27 '15 at 7:07
source share

Use this code below

  border:2px soild #eee; margin: 15px 15px; -webkit-box-shadow: 2px 3px 8px #eee; -moz-box-shadow: 2px 3px 8px #eee; box-shadow: 2px 3px 8px #eee;

Explanation: -

box-shadow requires you to set horizontal & vertical offset, then you can optionally set the blur and color, you can also choose to insert a shadow instead of the standard one. Color can be defined as hex or rgba .

box-shadow : insert / exit h-offset v-offset blur color offset;

Explanation of meanings ...

inset / outset - whether the shadow is inside or outside the field. If it is not specified, it will default to its original position.

h-offset - horizontal shadow offset (required)

v-offset - the vertical offset of the shadow (required)

blur - as they say, blur the shadow

Distribution - moves the shadow from the box equally on all sides. A positive value causes the shadow to expand, a negative value causes it to contract. Although this value is not often used, it is useful with several shadows.

color - as they say, the color of the shadow

Using box-shadow: 2px 3px 8px #eee; gray shadow with 2px horizontal projection, vertical with 3px and 8px blur

+2
Jan 04 '19 at 7:34
source share

The CSS code will be as follows:

 box-shadow: 0 0 10px 5px white;

This obscures the entire DIV regardless of its shape!

+1
Oct 05 '18 at 16:00
source share
 .allSides { width:350px;height:200px; border: solid 1px #555; background-color: #eed; box-shadow: 0 0 10px rgba(0,0,0,0.6); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6); -o-box-shadow: 0 0 10px rgba(0,0,0,0.6); }

Use this when hovering over to see its real effect, it will give a border & shadow to divide ..

0
Feb 13 '19 at 4:36
source share


More articles:


All Articles