CSS에서 '바깥 쪽'경계선 반경?

현재 내 웹 사이트의 상단에있는 링크는 다음과 같다 :CSS에서 '바깥 쪽'경계선 반경?

enter image description here

을 그러나, 나는 "둥근"버튼의 아래쪽 가장자리가 그들이에서오고있다처럼 보이게하려고 페이지와 상단의 리본 안으로

나는 당신이 그것을 해킹하고 각 항목 사이에 둥근 모서리가있는 "구분 기호"div를 추가 할 수 있다는 것을 알고 있습니다. 그러나 이것은 사용 된 테두리에서 보는 것이 모두 어렵지 않을 것입니다. 또한 내 버튼이 서로 매우 가까워서 쉽게 볼 수 없습니다.

"버튼"을위한 CSS :은 "리본"에 대한

.button { 
    border-top: 3px solid #A1C1BE; 
    border-left: 3px solid #A1C1BE; 
    border-right: 3px solid #A1C1BE; 
    border-bottom: 0px; 
    padding: 5px 8px 5px 8px; 
    margin: 0 0 -9px 0; 
    border-radius: 5px 5px 0 0; 
    font-size: 12px; 
    font-family: 'PT Sans', sans-serif; 
    background-color: #f8f8ff; 
    color: #484848; 
}

CSS : 당신이 볼 수 있듯이

#top-wrapper { 
    border-bottom: 5px solid #A1C1BE; 
    width: 100%; 
    background-color: #59554E; 
    padding: 10px 0 0 0; 
    color: #C0C0A8; 
}

, 두꺼운 테두리의 길이를 뻗어 리본에 속하는 얇은 파란색 테두리는 버튼의 일부입니다. 전 : 후 의사 클래스

출처

2011-11-15 n0pe

이 솔루션은 사용 가능성이 perspective 속성보다 멋진 할 수있는 각 버튼 및 3D 효과를 box-shadow을 적용하여 생성 할 수 있습니다. 함께 놀 수있는 메뉴의 JSfiddle을 연결할 수 있습니까? 건배. – doctororange

도움을 주셔서 감사합니다 @doctororange, 여기 JSFiddle http://jsfiddle.net/395Ue/ – n0pe

나는 이것을 읽어야한다고 생각합니다 : http://stackoverflow.com/questions/4839613/how-to-make-round-corners -to-both-inside-of-a-box-and-the-border – JohnB

원하는 효과는 3D 변환을 적용하고

출처

2013-06-23 18:34:08 eldos

CSS에서 '바깥 쪽'경계선 반경?

답변

관련 문제