Multiple box borders CSS

Question

Can you explain to me more, this is the code I can't understand box shadow properties. I have tried to figure out what is all about, but I can. Thank you very much!

h1 {
    text-shadow: 5px 5px 2px #999;
}
h2 {
    color: #fff;
    text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
}
div {
    width: 50%;
    margin: auto;
    background-color: #ff0;
    box-shadow: 5px 0 10px #aaa, 0 5px 10px #aaa, -5px 0 10px #aaa, 0 -5px 10px #aaa;
}

 <!DOCTYPE html>
    <html>
    <head>
     <title>03 - Senke</title>
    </head>
    <a>
     <img src="">
    </a>
    <body>
     <h1>03 Senke</h1>
     <h2>Podnaslov</h2>
     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </body>
    </html>

read about the box shadow on this link: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp — jitu thakur, Apr 24 '19 at 09:10
Or betetr yet - https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow — Paulie_D, Apr 24 '19 at 09:49
I red it. But there is four borders around box, I can't find any suitable information. When I remove one line (5px 0 10px #aaa, 0 5px 10px #aaa, -5px 0 10px #aaa, 0 -5px 10px #aaa;), there is only two shadows. When I left another line, there is no any shadow at all ? — CA-RIA, Apr 24 '19 at 10:28

score 1 · Answer 1 · answered Apr 24 '19 at 19:15

As name says it all. Box shadow property add shadows to any element you want.

5px 0 10px #aaa this part will apply shadow in light black shade on right side.
0 5px 10px #aaa this part will apply shadow in light black shade on bottom side.
-5px 0 10px #aaa this part will apply shadow in light black shade on left side.
0 -5px 10px #aaa this part will apply shadow in light black shade on up side.

First value in individual value pair will shift shadow from left to right and right side will remain same. 2nd value only shift shadow up/down depending upon value (+form up down and -ve value for bottom up). 3rd value added smoothness to shade(greater the value,the smoother will b shading) and 4th is for colour.

#example1 {
  border: 1px solid;
  padding: 10px;
 box-shadow: 5px 0 10px #aaa, 0 5px 10px #aaa, -5px 0 10px #aaa, 0 -5px 10px #aaa;
}

<div id="example1">
  <p>A div element with a shadow. The first value is the horizontal offset and the second value is the vertical offset.The optional third value adds a blur effect to the shadow. The shadow color will be inherited from the text color.</p>
</div>

Thank you very much, and sorry for such a late answer, I just stucked with javascript homework. — CA-RIA, May 30 '19 at 13:23

score 0 · Answer 2 · answered Apr 24 '19 at 16:46

Instead of writing this:

box-shadow: 5px 0 10px #aaa, 0 5px 10px #aaa, -5px 0 10px #aaa, 0 -5px 10px #aaa;

Try this:

box-shadow: 0px 0px 5px 7px rgba(0,0,0,0.75);

In short, each value corresponds to the following:

I'd suggest ignoring the borders, the reason it looks like there is a border in your example is the "spread" property of box-shadow which I'll explain below.

box-shadow: <horizontal length of shadow> <verticle length of shadow> <amount of blur in shadow> <the spread radius of the shadow (How far should the shadow be cast)> rgba(<RGBA color code>);

Take a look at this tool: https://www.cssmatic.com/box-shadow It's a simple little page that allows you to use sliders to modify a box-shadow in real time, I feel this will help you get a better idea of how each of the values are interacting with one and other.

Multiple box borders CSS

2 Answers2