CSS 국경 중복으로 자식 요소

Question

여기를 참조하십시오 :

http://jsfiddle.net/cnJ6q/

난 그냥 자식 요소에 테두리를 추가 할 수 없습니다, 그것은 (.dc-매끄러운) 부모에 추가해야합니다 -인가 이 문제를 해결할 방법이 있습니까? Z- 색인은 도움이되지 않습니다.

감사합니다.

Answer 1

두 가지 방법이 있습니다. 1) 자식 요소는 변형되지 않은 부모 요소와 동일한 크기를 취합니다. 그런 다음 부모 요소에 캐스팅해야하는 배경

.dc-slick { 

    border: 3px solid red; 
    right: 0px; 
    left: 0px; 
    position: fixed; 
    border-bottom-left-radius: 30px 30px; 
    border-bottom-right-radius: 30px 30px; 
    z-index: 10001; 
    margin-top: 0px; 
    background: black; 
} 

.dc-slick-content { 

    color:white; 
    z-index:9999; 
    width: 100%; 
    height: 200px; 
    border-bottom-left-radius: 15px 15px; 
    border-bottom-right-radius: 15px 15px; 
} 

2) 부모와 같은 방식으로 자식을 축척해야합니다.

.dc-slick { 

border: 3px solid red; 
    right: 0px; 
    left: 0px; 
    position: fixed; 
    border-bottom-left-radius: 30px 30px; 
    border-bottom-right-radius: 30px 30px; 
    z-index: 10001; 
    margin-top: 0px; 

} 

.dc-slick-content { 

    background: black; 
    color:white; 
    z-index:9999; 
    width: 100%; 
    height: 200px; 
    border-bottom-left-radius: 28px 28px; 
    border-bottom-right-radius: 28px 28px; 
} 

Answer 2

하위 div는 사용하는 용도에 관계없이 부모의 z- 색인을 상속합니다.

문제는 테두리 반경이 일치하지 않습니다. 각 요소에 동일한 경계 반지름을 사용하십시오. 그렇지 않으면이 겹침이 생깁니다.

border-bottom-left-radius: 30px 30px; 
border-bottom-right-radius: 30px 30px; 

Updated example.

Answer 3

당신이해야 background: black.dc-slick에

.dc-slick { 
    background: black; 
} 

.dc-slick-content { 
    /*background: black;*/ 
    /*border-bottom-left-radius: 15px 15px;*/ 
    /*border-bottom-right-radius: 15px 15px;*/ 
} 

업데이트 JSFidle 배경 색상과 같은 요소의 테두리를 가지고 있으므로 이동 : http://jsfiddle.net/RxyRV/