🔥

[3. 76 - CSS Rendering 2회차]

문제)

정답

border: 10px double #88aa00; outline: 10px dashed #00aa00; box-shadow: 0 0 0 10px #cccc00;

[윤]


<body>
    <div
      style="
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        border: 5px solid #fff;
        box-shadow: 0 0 0 3px green, 0 0 0 15px yellow, inset 0 0 0 3px green;
        outline: 15px dashed green;
        background-color: #fff;
        box-sizing: border-box;
      "
    ></div>
</body>

알게된 점

그림자와 외각선은 지오메트리 범위가 아니라 플래그맨트로 그림만 그려지는 것이기 때문에 여백 공간이 충분히 없으면 밀려버린다

top, left속성을 없애고 magin을 따로 주지 않았을 때(body의 기본 마진 제거)
해당 요소의 마진이건 그냥 공간이건 쨋든 그려질 공간이 있어야 함

box-shadow의 작성 순서 - 작성한 순서와 역순으로 그려지고 border시작점으로 쌓인다

[송이]



<div
      style="
        width: 20px;
        height: 20px;
        outline: 2px dashed green;
        border: 1px double lightgreen;
        box-shadow: 0 0 0 2px yellow;
      "
></div>