CSS를 두 번 만드는 방법은 무엇입니까?

Question

div 주위에 2 색으로 이중 테두리를 만드는 가장 쉬운 방법은 무엇이라고 생각합니까? 테두리와 윤곽선을 사용해 보았는데 Firefox에서 작동했지만 개요가 IE에서 작동하지 않는 것 같았습니다. 이것에 대해 좋은 방법이 있습니까?

outline: 2px solid #36F; 
border: 2px solid #390; 

Answer 1

이 작동 할 수 있습니다 :

.border 
    { 
     border:2px solid #36F; 
     position:relative; 
     z-index:10 
    } 

    .border:before 
    { 
     content:""; 
     display:block; 
     position:absolute; 
     z-index:-1; 
     top:2px; 
     left:2px; 
     right:2px; 
     bottom:2px; 
     border:2px solid #36F 
    } 

Answer 2

를 그냥 2 명 div의

<div style="border: 2px solid #36F"> 
    <div style="border: 2px solid #390"> 
     Text goes here 
    </div> 
</div> 

http://jsfiddle.net/fpCAf/

Answer 3

를 사용

이

내가했지만, 윤곽이 IE에서 작동하지 않는 것입니다

몇 가지 가능성 :

1. 테두리 + 윤곽선 테두리 IE는에 실패합니다.
2. border-image. 당신은 이미지를 생성해야합니까 (시간 낭비) IE 9는
3. 개의 유사 요소를 빠르고 쉽게 실패합니다. 여분의 마크 업, 이미지 및 그라디언트를 사용할 수 없습니다. IE8 그것을 처리해야하지만 그라데이션
4. 테두리 + 상자 그림자 는 IE9가 처리해야 오래된 IE에 대한 필터를 찾고 좋지 않다
5. 여러 박스 그림자에 내부와 외부, 큰 그릴 수
국경에 깎아 지른듯한 효과를 주면 테두리 반경도 뒤 따른다. IE9는 좋은 찾고되지 않는 오래된 IE를 들어,
6. 배경 이미지를 필터를 처리해야 및 그라데이션 IE9은 그라데이션

... 왼쪽에 실패? IE8보다 작 으면 2 개의 기본 테두리를 그릴 때 2 개의 요소를 줄이십시오.