css 트리플 테두리?

Question

안녕하세요, 저는 css를 사용하여 트리플 경계를 만들려고합니다. 지금 내가 가진 것은 두 개의 테두리지만 두 번째 테두리는 요소 (div.container#main)를 완전히 둘러 보지 않습니다.

나는 이것을 blog post에 팔로우하고 있습니다. JSFiddle.

경계선을 요소 주위로 완전히 가져 가면 도움이됩니다.

Answer 1

그래서 근본적으로 문제는 위의 aboslute를 사용하고 worng 요소에서 계산하는 것입니다.

높이가 지정된 경우 또는 요소가 내용을 가지고있을 때 무언가가 절대적으로 높이에만 위치 할 때. 이 경우 해결 방법은 top 및 bottom 값을 할당하는 것입니다.이 값은 본질적으로 요소 exapand가됩니다. bottom 값을 잊어 버렸습니다.

http://jsfiddle.net/J3e9R/2/

그러나 그것만 알면 통지 이제 요소가 뷰 포트의 맨 아래로 이동 :를 추가하면이 우리에게 제공합니다. 이것은 위치 지정 부모 (relative, absolute, static)가 없으면 위치 지정을위한 컨텍스트로 최상위 요소를 기본값으로 사용하기 때문입니다.

이 문제를 해결하려면 여분의 래퍼 요소를 추가하고 위치에 상대적인 위치를 지정하거나 테두리 스타일을 div.row으로 옮길 수 있습니다. 어쨌든이 기술은 동일합니다. 다른 래퍼를 추가 할 수 있는지 여부 또는 div.row이 상황에 적합한 지 여부에 달려 있습니다. 그래서이 제공 :

http://jsfiddle.net/J3e9R/3/

이제 우리가 실제로 내부 테두리 상자의 크기와 협력 작업을해야 볼 수 있습니다. 하지만 이제 우리의 입장은 꺼져 있습니다. 지금 우리는 외부에 순서를 가지고 다시이며,

가

http://jsfiddle.net/J3e9R/4/

확인 : 이것은 우리의 우리가 내부에서 작업중인 외부 요소 #main로부터의 오프셋 (offset) 밖으로 그래서 우리는 우리의 측정을 반전해야하기 때문에 대신 계산이다 우리의 원래 상자의 가장자리, 그래서 우리는 우리의 바깥 쪽 테두리의 중간에 그것을 가지고해야합니다, 그래서 우리는 마침내 우리가 원하는 것을 우리에게주는 약 절반에 측정을 변경 jsut :

http://jsfiddle.net/J3e9R/1/