outline, 자꾸 그림자가 얇아져.(※ 개인 소감)

개요

outline은 요소의 윤곽선을 지정합니다.
윤곽선은 테두리 (경계선) 의 바깥쪽에 그려지고 대부분 사각형의 테두리 선이다.
사용 방법은border와 대체적으로 같지만 다음과 같다.

상하좌우를 따로 설정할 수 없습니다

원각(border-radius)에 해당하는 것은 없다

outline-offset 속성을 통해 표시 위치를 조정할 수 있습니다. 그러나 IE의 모든 버전은 지원되지 않습니다

(엄밀히 말하면 outline-style, outline-width, outline-color 이 세 가지 속성을 동시에 지정하는 짧은 기계손)
outline-offset 이외에 CSS2.1에서 건의한 속성으로 상당히 오래된 브라우저가 아니면 사용할 수 있습니다.

특징과 응용 실례

outline은border와 동등한 정도 이하로만 표현할 수 있으나 프레임 모델 설정에 독립적이고 레이아웃에 영향을 주지 않는 특징을 가지고 있다.border와 동시에 사용하면 한 프레임 요소에 두 가지 프레임 라인을 그릴 수 있습니다.
용도로 브라우저의 초점 상자(키보드로 작업하는 상황에서 등)의 표시, 입력 폼의 필수 항목과 중요한 단락의 하이라이트 등은 임시로 사용되는 경우가 많다.
그러나 시각적 디자인만을 위한 요소라면 outline을 항상 표시할 수 있다.

테두리와 outline에 테두리를 두 개 그려주세요.

다음 예는 빨간색 점의border 바깥쪽에 노란색 점의outline을 표시합니다.

/* 枠線を２つ引く */
div{
  border:  0.6em #f00000 dotted;
  outline: 0.8em #ffdd00 dotted;
}

outline-offset을 통해 표시 위치 변경

다음 예는 빨간색 border의 약간 안쪽에 노란색 outline을 겹쳐 표시합니다.노란색은 반투명이기 때문에 겹치는 부분은 오렌지색이다.

outline-offset은border 바깥쪽의 상대적인 거리로outline의 표시 위치를 지정합니다.IE는 모든 버전을 지원하지 않습니다.
음값이면border의 선이나 안쪽에 outline을 표시할 수 있습니다.

div{
  padding: 1em;
  border:  1em #ff0000 solid;
  outline: 1em #ffff0080 solid;
  outline-offset: -1.5em;
}

border의 경우 굵기(border-width)를 바꾸면 내용 영역의 크기에 영향을 주지만outline은 간섭하지 않습니다.또 바깥쪽의 다른 요소와 중첩되더라도 배치에 영향을 주지 않는다.
탱탱한 장인의 디자인도 안심이 되나요?