CSS 그림자 효과로 다중 테두리선 효과 만들기

CSS로 구현되는 테두리선 속성인 "border"는 두께, 색상, 그리고 스타일 속성 값을 사용해 다양한 모양의 테두리선을 만들 수 있습니다.

다만 아무리 두꺼워도 HTML 요소에 테두리선은 1개만 적용할 수 있습니다.

테두리선 스타일 중 "double" 속성을 사용하면 2줄로 그어진 테두리선을 표현할 수도 있기는 하지만, 어디까지만 같은 두께인 같은 색상을 두줄 모양으로만 한정됩니다.

그림자 효과로 테두리선 만들기

CSS 그림자 속성을 활용하면 여러 개의 테두리선을 표시할 수 있습니다.

다음 그림자 효과는 너비 10px인 빨강 테두리선 바깥에 다시 10px인 파랑 테두리선이 있는 모양이 됩니다.

.shadow-border {
	box-shadow: 0 0 0 10px #ff0000, 0 0 0 20px #0000ff;
}

이런 테두리선 효과가 가능한 것은, CSS 그림자 효과를 여러 개 중첩해서 적용할 수 있는 특징을 활용해 여러 개의 그림자 효과를 겹치지 않도록 배치해서 여러 개의 테두리선처럼 보이도록 만든 것입니다.

그림자 효과는 최대 5개의 설정 값을 사용할 수 있습니다. 그리고 쉼표로 구분해 2개 이상의 그림자 효과를 중첩할 수 있습니다.

box-shadow: 수평오프셋 수직오프셋 블러크기 스프레드크기 색상;

그림자 효과를 테두리선 처럼 보이도록 하려면 수평 오프셋, 수직 오프셋, 블러크기를 모두 0으로 하면 됩니다. 스프레드는 테두리선의 두께 역할을 합니다. 블러크기가 0이 되는 것이 중요합니다. 경계가 명확해지기 때문에 두께가 있는 선으로 보이게 됩니다.

검은색으로 20px 두께의 테두리선을 그림자 효과로 만들려면 다음과 같이 작성합니다.

box-shadow: 0 0 0 20px #000;

2개 이상의 그림자 효과로 테두리선을 2개 이상 만들 때는 그림자 효과가 중첩되지 않도록 나중에 나오는 테두리선 두께를 바로 앞의 스프레드 크기보다 더 크게 해야 합니다.

그림자 효과를 중첩할 때는 먼저 나온 그림자 효과 뒤에 나중에 나오는 그림자 효과가 중첩되기 때문에 같은 크기로 스프레드를 설정하면 앞에 나온 그림자 효과에 가려져서 뒤에 나오는 그림자 효과로 만든 테두리선이 보이지 않게 됩니다.

box-shadow: 0 0 0 10px #ff0000, 0 0 0 20px #0000ff;

그림자 색상은 반투명 색상으로 할 수도 있습니다. 앞에 나오는 그림자 색상을 반투명으로 설정하면, 그림자 효과가 어떻게 중첩되는지 알 수 있습니다.

box-shadow: 0 0 0 10px rgba(255,255,255,0.5), 0 0 0 20px #0000ff;

그림자 효과를 여러 개 중첩하면 무지개 효과나 그라데이션 효과와 같은 다채로운 모양을 연출할 수도 있습니다.

box-shadow: 0 0 0 10px #ffeeff, 0 0 0 20px #ffddff, 0 0 0 30px #ffccff, 0 0 0 40px #ffbbff, 0 0 0 50px #ffaaff, 0 0 0 60px #ff99ff, 0 0 0 70px #ff88ff, 0 0 0 80px #ff77ff, 0 0 0 90px #ff66ff;

테두리선(border), 아웃라인(outline), 그림자 효과(box-shadow) 중첩 순서

테두리선, 아웃라인, 그리고 그림자효과는 중첩이 되는 순서가 있습니다.

먼저 테두리선은 선 두께만큼 영역을 차지하며, 아웃라인, 그림자 효과와 중첩되지 않습니다. 그리고 요소 영역 바로 바깥에 테두리선 두께만큼의 영역을 차지하기 때문에 요소의 크기가 테두리선 두께를 더한 만큼 커지게 됩니다.

요소의 크기가 커지지 않도록 하려면 "box-sizing: border-box;" 속성을 요소에 추가해서 테두리선 두께가 요소의 크기에 포함되도록 해야 합니다.

아웃라인과, 그림자 효과는 테두리선 바깥에 위치하며, 서로 중첩됩니다. 아웃라인이 가장 앞에 오고, 그림자 효과는 그 뒤에 중첩됩니다. 그리고 여러 개의 그림자 효과가 있을 경우 나오는 순서대로 밑에 중첩됩니다.

background-color: #c0c0c0;
box-sizing: border-box;
border: 10px dashed #000;
outline: 10px solid #ffaaff;
box-shadow: 0 0 0 20px #ccffaa, 0 0 0 30px #0000ff;

검정 점선은 테두리선이고 아웃라인과 그림자 효과를 테두리선 외곽에서부터 중첩됩니다.

중첩 순서는 맨 위에 초록색 아웃라인이 배치되고, 그 뒤에 그림자 효과가 적용 순서대로 뒤로 중첩됩니다.

그림자 효과 스프레드(두께) 크기를 10px로 하면 아웃라인과 겹쳐서 그림자 효과로 만든 테두리선이 보이지 않게 됩니다. 항상 누적 순서에 따라 스프레드(두께) 크기를 점점 크게 해서 테두리선이 보일 수 있도록 해야 합니다.

테두리선(border)과 아웃라인(outline) 스타일 조합

테두리선과 아웃라인은 테두리선 스타일을 사용할 수 있습니다.

스타일을 잘 조합하면 다채로운 테두리 선 조합을 만들어 낼 수 있습니다.

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