CSS - 탭이있는 테두리 이미지 구현

Question

백엔드 프로그래머가 많지만 디자인을 구현하고 있으며 테두리 상자를 구현하는 가장 효율적인 방법이 무엇인지보고 싶었습니다.

아이디어는 파란색 탭 섹션의 헤더 텍스트를 포함하는 것입니다 - 여기

는 상자의 예입니다.

이상적으로는 HTML과 CSS 만 사용하고 싶지만 형상 때문에 이미지로 탭을 사용해야 할 수도 있습니다. 이 상자는 내용에 따라 다양한 크기가 될 수 있습니다.

이 나는 ​​주로 나를 위해 문제를 제기 탭의,

-webkit-border-radius: 10px; -moz-border-radius: 10px; 

또는 유사한 사용 파란색 테두리에게 문제를 할 수 없었다. 누군가 비슷한 조언을 제공 할 수있는 비슷한 일을 했습니까?

Answer 1

Start here 필요에 따라 수정할 수 있습니다.

Answer 2

.tab-header { 
    background: blue; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
    padding-bottom: 10px; /* we extend the header by 10px to the bottom */ 
} 

.tab-body { 
    border: 1px solid blue; 
    background: white; /* set a solid background */ 
    margin-top: -10px; /* move the body 10px up, so it covers the 
         10px padding from above */ 
} 

당신은 이에 따라 국경 반경 물건을 앞에해야하지만, 그 외에도이 최근 브라우저에서 작동합니다.