3-3 box-shadow

inset

geometry 에 영향을 주지 않는다.

<div style="background:blue;box-shadow: 0 0 0 10px #rgba(255, 255, 0, 0.5)"><div>

10px 짜리 border 와 똑같은 형태일 것이다.

red 박스를 색칠한 다음 blue 박스를 색칠하기 때문에
blue 박스의 box-shadow 가 상위에 위치한다.
인라인 요소임에도 불구하고 그려지는 순서가 존재함

box-shadow & position: relative#

position:relative 는 fragmentation 이 끝나고(normal flow 가 끝나고)
다시 그리는 것이기 때문에
blue 의 box-shadow 보다 더 상위 레이어에 위치한다.

<div style="background:red;position:relative"></div>
<div style="background:blue;box-shadow: 0 0 0 10px #rgba(255, 255, 0, 0.5)"><div>

box-shadow: inset#

border-box 안쪽의
padding 영역에 box-shadow inset 이 그려졌다.

<div style="background:red;">
</div><div style="background:blue;box-shadow: inset 0 0 0 10px rgba(255, 255, 0, 1)"></div>

box-shadow sandwich#

box-shadow 는 , 로 몇 개의 레이어도 그릴 수 있다.

<div style="background:red;"></div>
<div 
  style="background:blue;
  box-shadow: 0 0 0 10px #aa0, inset 0 0 0 10px #aa0">
</div>

<div style="background: blue;
  box-shadow:
    0 0 0 10px #aaa,        /*1*/
    0 0 0 20px #0a0,        /*2*/
    inset 0 0 0 10px #aa0,  /*3*/
    inset 0 0 0 20px #0a0   /*4*/
  ;
"></div>

(2-4) 의 일부가 보이지 않는 이유는
- 브라우저에서 div 가 차지하는 영역에서 fragment 가 뷰포트를 벗어났기 때문이다.
여러 띠의 레이어가 나타났지만 실제로 shadow 가 겹쳐보이는 것이다.
만약에 겹쳐 보이는 것이라면 (2) 가 (1) 을 덮어써 (1) 이 보이지 않아야 되지 않을까?
- 그러나 선언의 반대 순서로 그려짐
- 스택처럼 쌓이기 때문이다.

box-shadow 는 border-radius 를 따라간다.#

<div style="background: blue;
  box-shadow:
    0 0 0 10px #aaa,        
    0 0 0 20px #0a0,        
    inset 0 0 0 10px #aa0,  
    inset 0 0 0 20px #0a0;
  border-radius: 50%;
"></div>

box-shadow with animation#

<style>
    @keyframes ani {
        from {
            box-shadow:
                    0 0 0 0px #aa0,
                    0 0 0 0px #0a0,
                    inset 0 0 0 0px #aa0,
                    inset 0 0 0 0px #0a0
        }
        to {
            box-shadow:
                  0 0 0 10px #aa0,
                  0 0 0 20px #0a0,
                  inset 0 0 0 10px #aa0,
                  inset 0 0 0 20px #0a0
        }
    }
    div {
        width: 100px; height: 100px;
        display: inline-block;
        padding: 10px;
        border: 10px dashed rgba(0,0,0,0.5);
    }
</style>
<body>
<div style="
  background: blue;
  animation: ani 0.4s linear alternate infinite;
"></div>
</body>

animate-border-shadow

<style>
    @keyframes ani {
        from {
            transform: rotate(0);
            box-shadow:
                    0 0 0 0px #aa0,
                    0 0 0 0px #0a0,
                    inset 0 0 0 0px #aa0,
                    inset 0 0 0 0px #0a0
        }
        to {
            transform: rotate(360deg);
            box-shadow:
                  0 0 0 10px #aa0,
                  0 0 0 20px #0a0,
                  inset 0 0 0 10px #aa0,
                  inset 0 0 0 20px #0a0
        }
    }
    div {
        width: 100px; height: 100px;
        display: inline-block;
        padding: 10px;
        border: 10px dashed rgba(0,0,0,0.5);
        border-radius: 50%;
    }
</style>
<body>
<div style="
  background: blue;
  animation: ani 0.4s alternate infinite;
"></div>
</body>

box-shadow-animation